// 复核人员设置
<template>
  <div>
    <up-down-layout :handleFlag.sync="handleFlag">
      <search-form searchPerms="search"
                   slot="query"
                   :formValue.sync="queryParas"
                   :componentList="componentList"
                   :isShowResetBtn="isShowResetBtn"
                   :isShowFoldBtn="isShowFoldBtn"
                   @handleFilter="handleFilter"
                   @clearParam="clearParam"></search-form>
      <template slot="table">
        <data-table ref="dataTable"
                    :api="api"
                    v-bind="elHeightObj"
                    selectable="false"
                    :handleFlag.sync="handleFlag"
                    :menuFlag="false"
                    :queryParas="queryParas"
                    :sourceData.sync="sourceData"
                    :loadCount.sync="loadCount"
                    loadPage="getPage"
                    :columns="columns"
                    :showSelection="false"
                    :otherHeight="'240'"
                    operateBtnLayout=""
                    :IsRight="false"
                    :pageAll="true"
                    :operatWidth="'200'">
          <el-table-column align="center" :label="$t('common.operate')" fixed="right" width="80">
            <template slot-scope="scope">
              <auth-button :title="$t('common.settings')"
                           size="medium"
                           class="iconCircle marginLeft"
                           icon="iconfont iconshezhi"
                           @click="reviewSet(scope.row)"></auth-button>
            </template>
          </el-table-column>
        </data-table>
      </template>
    </up-down-layout>
    <!-- 操作 -->
    <ReviewPersonSetup :visible.sync="setUp"
                       v-if="setUp"
                       :editModel="editModel"
                       :form="form"
                       :detail="detail"
                       :keyId="currentRow.keyId"
                       :options="options"
                       :selected="selected"
                       @operateSuccess="operateSuccess"></ReviewPersonSetup>
  </div>
</template>
<script>
import { upDownLayout, searchForm, DataTable, authButton, btnExport } from 'newepoch-components'
import SelectProduct from '@/components/element/assetaudit/SelectProduct'
import ReviewPersonSetup from '@/pages/assetaudit/reviewPersonSetup/reviewPersonSetupPop'
import * as format from '@/filters/index'
import reviewPersonApi from '@/api/assetaudit/reviewPersonSetupApi'
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'

export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'reviewPersonSetupIndex',
  components: {
    searchForm,
    upDownLayout,
    DataTable,
    btnExport,
    authButton,
    SelectProduct,
    ReviewPersonSetup
  },
  data () {
    return {
      options: [],
      selected: [],
      handleFlag: true,
      keyId: '',
      loadCount: 0,
      editModel: 'V',
      currentRow: {},
      detail: {},
      info: {},
      setUp: false, // 复核人员设置弹框
      isShowResetBtn: true,
      isShowFoldBtn: false,
      queryData: {},
      form: {},
      componentList: [{
        // from 姓名
        label: this.$t('reviewPersonSetupIndex.staffName'),
        disabled: false,
        value: 'staffName',
        placeholder: this.$t('common.pleaseInput'),
        labelWidth: '70px',
        clearable: true,
        componentName: 'el-input'
      }
      ],
      columns: [
        {
        // 姓名
          prop: 'staffName',
          align: 'left',
          width: '50px',
          label: this.$t('reviewPersonSetupIndex.staffName')
        },
        {
        // 评审素材分析是否复核
          prop: 'committeePrincipal',
          align: 'center',
          width: '90px',
          label: this.$t('reviewPersonSetupIndex.committeePrincipal'),
          format: (row) => {
            return format.formatDict(row.committeePrincipal, 'HG_YES_NO')
          }
        },
        {
        // 反馈素材无需复核产品
          prop: 'productName',
          align: 'left',
          width: '300px',
          label: this.$t('reviewPersonSetupIndex.reviewProductName')
        }
      ],
      sourceData: []
    }
  },
  computed: {
    // api接口
    api () {
      return reviewPersonApi.reviewPerson
    },
    // 产品下拉接口
    apiProduct () {
      return reviewPersonApi.productList
    }
  },
  mounted () {
    // 触发loadCount去请求获得表格数据
    this.handleFilter()
  },
  methods: {
    reviewSet (row) { // 复核设置
      this.currentRow = row
      this.options = []
      this.selected = []
      this.apiProduct.getSelect().then(res => { // 获取产品下拉列表
        if (res.success) {
          let childrenData = res.data.map(item => {
            return { id: item.keyId, label: item.projectName }
          })
          this.options.push({ id: 'all', label: this.$t('retrievalIndex.checkALL'), 'children': childrenData })
          // 请求成功后 赋值弹窗界面数据
          if (row.keyId) { // keyId存在 编辑 复核设值
            this.editModel = 'E'
            this.queryParas.keyId = row.keyId
            this.api.get(row.keyId).then(res => {
              if (res.success) {
                this.selected = res.data.productNameIds
                this.detail = res.data
                this.setUp = true
              }
            })
          } else { // keyId不存在 新增 复核设值
            this.editModel = 'C'
            this.detail = row
            if (!row.committeePrincipal) { this.detail.committeePrincipal = '' }
            this.setUp = true
          }
        }
      })
    },
    operateSuccess (status) { // 操作成功重新请求
      if (status) {
        this.$refs.dataTable.loadTableData()
      }
    }
  }
}
</script>