<template>
  <div>
    <div v-show="!$route.path.includes('gradingRuleDetail')">
      <search-layout :needBox="true">
        <!-- <template slot="searchItem1">
                              <span class="label">规则ID</span>
                              <el-input
                                  v-model="searchParams.rulesCode"
                                  size="small"
                                  clearable
                                  placeholder="请输入"
                                  maxlength="60"
                                  @keyup.enter.native="doSearch"
                              >
                              </el-input>
                          </template> -->
        <template slot="searchItem1">
          <span class="label">规则名称</span>
          <el-input
            v-model="searchParams.ruleName"
            size="small"
            clearable
            placeholder="请输入"
            maxlength="50"
            @keyup.enter.native="doSearch(false)"
          >
          </el-input>
        </template>
        <template slot="searchItem2">
          <span class="label">规则描述</span>
          <el-input
            v-model="searchParams.ruleDescription"
            size="small"
            clearable
            placeholder="请输入"
            maxlength="300"
            @keyup.enter.native="doSearch(false)"
          >
          </el-input>
        </template>
        <template slot="searchItem3" v-if="activeName !== '3'">
          <span class="label">创建时间</span>
          <!-- <el-date-picker
                          v-model="searchDate"
                          type="daterange"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                      >
                      </el-date-picker> -->
          <el-date-picker
            v-model="searchParams.yearMin"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"
            class="dateRangeInput"
          >
          </el-date-picker>
          <span class="dateSeparator">至</span>
          <el-date-picker
            v-model="searchParams.yearMax"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
            class="dateRangeInput"
          >
          </el-date-picker>
        </template>
        <template slot="searchItem4" v-else>
          <span class="label">规则类型</span>
          <el-select
            v-model="searchParams.ruleType"
            size="small"
            clearable
            placeholder="请选择规则类型"
          >
            <el-option
              v-for="item in ruleTypeOpts"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </template>
        <template slot="searchBtn1">
          <el-button type="primary" @click="doSearch(false)">查询</el-button>
        </template>
        <template slot="searchBtn2">
          <el-button type="primary" @click="doReset">重置</el-button>
        </template>
      </search-layout>

      <div class="myTabsBox">
        <el-tabs
          style="width: 350px"
          v-model="activeName"
          type="card"
          @tab-click="pageControl"
        >
          <el-tab-pane label="公有" name="1"></el-tab-pane>
          <el-tab-pane label="私有" name="2"></el-tab-pane>
          <el-tab-pane label="场景评价" name="3"></el-tab-pane>
        </el-tabs>
        <el-button
          v-show="['2', '3'].includes(activeName)"
          class="addBtn"
          icon="el-icon-circle-plus-outline"
          @click="addOne"
          type="primary"
          >新增</el-button
        >
      </div>

      <tableList
        ref="table"
        style="margin: 0 30px"
        :columns="columns"
        :getDataWay="getDataWay"
        :pagination="pagination"
        index
      >
        <el-table-column label="规则描述" slot="ruleDescription" align="center">
          <template v-slot="scope">
            <span>{{ scope.row.ruleDescription }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" slot="cgInfos" align="center" width="180">
          <template v-slot="scope">
            <i
              v-if="
                (roleCode === '0' || roleCode === '1') && activeName === '2'
              "
              @click="shareRow(scope.row)"
              class="el-icon-share elIcon"
              title="分享"
            ></i>
            <i
              @click="editRow(scope.row)"
              class="el-icon-edit-outline elIcon"
              title="编辑"
            ></i>
            <i
              v-if="
                ((roleCode === '0' || roleCode === '1') &&
                  activeName === '1') ||
                activeName === '2' ||
                activeName === '3'
              "
              @click="delRow(scope.row)"
              class="el-icon-delete elIcon"
              title="删除"
            ></i>
          </template>
        </el-table-column>
      </tableList>
    </div>

    <router-view
      v-show="$route.path.includes('gradingRuleDetail')"
    ></router-view>
  </div>
</template>
  
  <script>
import searchLayout from '@/components/grid/searchLayout'
import tableList from '@/components/grid/TableList'
import toolbarTab from '@/components/toolbar/toolbarTab'
import { ruleTypeOpts } from './common'
import { mapState } from 'vuex'

export default {
  name: 'gradingRulesList', // 评分规则列表
  components: { searchLayout, tableList, toolbarTab },
  data() {
    return {
      activeName: '2',
      searchParams: {
        //搜索参数
        // rulesCode: "", //规则Id
        ruleName: '', //规则名称
        ruleDescription: '', //规则描述
        yearMin: '', // 开始时间
        yearMax: '', // 结束时间
        ruleType: '',
      },
      ruleTypeOpts, // 规则类型
      searchDate: '', // 创建时间
      columns: [
        //表格列
        {
          label: '规则名称',
          prop: 'ruleName',
        },
        {
          label: '规则描述',
          prop: 'ruleDescription',
          showOverflowTooltip: true,
          template: true,
        },
        {
          label: '创建时间',
          prop: 'createTime',
          formatter(row) {
            return row.createTime.slice(0, 10)
          },
        },
        {
          label: '操作',
          prop: 'cgInfos',
          template: true,
        },
      ],
      pagination: {
        //分页使用
        currentPage: 1,
        pageSize: 10,
        position: 'right',
        pageSizes: [10, 30, 50, 100, 200],
        layout: 'sizes, total, prev, pager, next, jumper',
      },
      getDataWay: {
        //加载表格数据
        dataType: 'url',
        type: 'post',
        // firstRequest: false,
        data: this.$api.sceneLibrary.queryScoringRulesList,
        param: {
          packageId: '11111111',
          share: '0',
        },
      },
      dialogVisible: false,
    }
  },

  computed: { ...mapState(['roleCode']) },

  watch: {
    $route(to, from) {
      if (to.name === 'gradingRulesList') {
        this.$nextTick(() => {
          this.doSearch(true)
        })
      }
    },
  },

  methods: {
    pageControl(data) {
      // 场景评价 切换接口地址
      if (data.name == '3') {
        this.getDataWay.data = this.$api.sceneLibrary.querySceneScoringRulesList
      } else {
        // 公有 私有
        this.getDataWay.data = this.$api.sceneLibrary.queryScoringRulesList
      }
      this.activeName = data.name
      this.doSearch(false)
    },
    // isBack为解决从详情回退时列表在当前页刷新
    doSearch(isBack = false) {
      // if (this.searchDate) {
      //     this.searchParams.yearMin = `${this.searchDate[0]} 00:00:00`;
      //     this.searchParams.yearMax = `${this.searchDate[1]} 23:59:59`;
      // } else {
      //     this.searchParams.yearMin = "";
      //     this.searchParams.yearMax = "";
      // }

      let yearMin = ''
      if (this.searchParams.yearMin) {
        yearMin = `${this.searchParams.yearMin} 00:00:00`
      }

      let yearMax = ''
      if (this.searchParams.yearMax) {
        yearMax = `${this.searchParams.yearMax} 23:59:59`
      }

      if (yearMin && yearMax && yearMin > yearMax) {
        this.$message.error('结束时间不能早于开始时间')
        return
      }

      let pageMap = {
        // rulesCode: this.searchParams.rulesCode,
        ruleName: this.searchParams.ruleName,
        ruleDescription: this.searchParams.ruleDescription,
        ruleType: this.searchParams.ruleType, // 规则类型
        yearMin,
        yearMax,
        share: this.activeName === '1' ? '1' : '0',
        resetPageNum: !isBack ? false : this.pagination.currentPage || 1,
      }

      if (!isBack) this.pagination.currentPage = 1

      this.refreshList(pageMap)
    },
    //刷新table
    refreshList(param) {
      param
        ? this.$refs['table'].loadData(param)
        : this.$refs['table'].loadData()
    },
    doReset() {
      this.searchParams = {
        // rulesCode: "",
        ruleName: '',
        ruleDescription: '',
        yearMin: '',
        yearMax: '',
      }
      // this.searchDate = "";
      this.doSearch()
    },
    viewRow(row) {
      this.dialogVisible = true
    },
    addOne() {
      this.$store.commit('getTabname', 'gradingRuleDetailTabName', '')
      localStorage.setItem('gradingRuleDetailTabName', '')

      this.$router.push({
        path: '/gradingRuleDetail',
        query: this.activeName == '3' ? { isScore: true } : {}, // 评分规则新增路由跳转标识
      })
    },
    shareRow(row) {
      this.$confirm('确认是否分享？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$axios({
          method: 'post',
          url: this.$api.sceneLibrary.fxScoringRules,
          data: {
            rulesId: row.rulesId,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('分享成功')
          } else {
            this.$message.error(res.message || '分享失败')
          }
          this.doSearch()
        })
      })
    },
    delRow(row) {
      const obj = this.activeName=='3'?{
        ruleId: row.ruleId
      }:{
        rulesId:row.rulesId
      }
      this.$confirm('确认是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$axios({
          method: 'post',
          url:
            this.activeName == '3'
              ? this.$api.sceneLibrary.deleteSceneEvaluationRule
              : this.$api.sceneLibrary.deleteScoringRules,
          data: obj,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.message || '删除失败')
          }
          this.doSearch()
        })
      })
    },
    editRow(row) {
      console.log('row', row)
      this.$store.commit('getTabname', 'gradingRuleDetailTabName', row.ruleName)
      localStorage.setItem('gradingRuleDetailTabName', row.ruleName)
      if (this.activeName == '3') {
        this.$store.commit('getEvaluationInfo', {
          ruleName: row.ruleName,
          ruleDescription: row.ruleDescription,
          ruleType: row.ruleType,
          scriptName: row.scriptName,
        })
      }
      const objs =
        this.activeName == '3'
          ? {
              rulesId: row.rulesId || row.ruleId,
              share: -1,
              isScore: true,
            }
          : {
              rulesId: row.rulesId || row.ruleId,
              share: row.share,
            }
      this.$router.push({
        path: '/gradingRuleDetail',
        // params: {
        //     rulesId: row.rulesId,
        //     share: row.share,
        // },

        query: objs,
      })
    },
  },

  // mounted() {}
}
</script>
  
  <style lang='less' scoped></style>