<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="down">
          <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @score="toScore">
            <template #custom="{item,row}">
              <template v-if="item.prop === 'achieve_name'">
                <el-link size="mini" type="primary" @click="toApply(row)">{{ getProp(row, 'apply_id.basic.achieve_name') }}</el-link>
              </template>
            </template>
          </data-table>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="成果详情" center width="80%" :close-on-click-modal="false" :visible.sync="applyDialog" destroy-on-close @closed="handleClose">
      <detail :form="apply"></detail>
    </el-dialog>
    <el-dialog title="评分" center width="30%" :visible.sync="scoreDialog" destroy-on-close @closed="handleClose">
      <el-form :model="verify" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="审核评分" prop="score">
          <el-input-number v-model="verify.score" :min="0" :max="100" label="请打分"></el-input-number>
        </el-form-item>
        <el-form-item label="审核建议" prop="content">
          <el-input
            type="textarea"
            placeholder="请输入审核建议"
            v-model="verify.content"
            maxlength="200"
            :autosize="{ minRows: 4, maxRows: 6 }"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" size="mini" @click="onSubmit('form')">提交审核</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
const _ = require('lodash');
import detail from './detail.vue';
import dataTable from '@common/src/components/frame/filter-page-table.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: achieveApplyExpert } = createNamespacedHelpers('achieveApplyExpert');
export default {
  name: 'index',
  props: {},
  components: { dataTable, detail },
  data: function() {
    return {
      list: [],
      total: 0,
      // 工作类型:1=>评分;2=>会审
      type: '1',
      opera: [
        {
          label: '评分',
          method: 'score',
        },
      ],
      fields: [
        { label: '成果名称', prop: 'achieve_name', showTip: true, custom: true },
        { label: '成果类别', prop: 'apply_id.basic.achieve_type', showTip: true },
        { label: '评分', prop: 'verify.score', showTip: true },
        { label: '状态', prop: 'verify', format: i => (_.isObject(i) ? '已评分' : '未评分') },
      ],
      applyDialog: false,
      apply: {},
      scoreDialog: false,
      use_id: undefined,
      verify: {},
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...achieveApplyExpert(['query', 'update']),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ skip, limit, ...info, expert_id: this.user.id, type: '1', apply: true });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    async toApply(data) {
      const apply = _.get(data, 'apply_id');
      this.$set(this, `apply`, apply);
      this.applyDialog = true;
    },
    toScore({ data }) {
      this.$set(this, `use_id`, _.get(data, '_id'));
      const verify = _.get(data, 'verify', { score: 0 });
      this.$set(this, `verify`, _.cloneDeep(verify));
      this.scoreDialog = true;
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.toVerify();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async toVerify() {
      const verify = _.cloneDeep(this.verify);
      const res = await this.update({ id: this.use_id, verify });
      if (this.$checkRes(res, '审核成功', res.errmsg || '审核失败')) {
        this.handleClose();
        this.search();
      }
    },

    getProp(data, prop) {
      return _.get(data, prop);
    },
    handleClose() {
      this.scoreDialog = false;
      this.applyDialog = false;
      this.apply = {};
      this.use_id = undefined;
      this.verify = {};
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>
