<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="one">
          <c-search :is_search="true" :fields="fields" @search="btSearch"> </c-search>
        </el-col>
        <el-col :span="24" class="two">
          <data-table :fields="fields" :opera="opera" @query="search" :data="list" :total="total" @view="toView" @exam="toExam" @export="toExport">
          </data-table>
        </el-col>
      </el-col>
    </el-row>
    <c-dialog :dialog="dialog" @toClose="toClose">
      <template v-slot:info>
        <el-col :span="24" class="dialog_one" v-if="dialog.type == '1'">
          <el-form :model="form" :rules="rules" ref="form" label-width="auto">
            <el-form-item label="审核状态" prop="status">
              <el-select v-model="form.status" clearable filterable placeholder="请选择审核状态" style="width: 100%">
                <el-option v-for="(item, index) in statusList" :key="index" :label="item.dict_label" :value="item.dict_value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审核意见" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入审核意见" type="textarea"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="toSubmit('form')">提交审核</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </template>
    </c-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('studio');
const { mapActions: unitStudioApply } = createNamespacedHelpers('unitStudioApply');
const { mapActions: message } = createNamespacedHelpers('message');
const { mapActions: sysdictdata } = createNamespacedHelpers('sysdictdata');
const moment = require('moment');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      searchInfo: {},
      fields: [
        { label: '序号', options: { type: 'index' } },
        { label: '依托单位', model: 'company_name', isSearch: true },
        { label: '工作室名称', model: 'name', isSearch: true },
        { label: '入驻科学家', model: 'scientist_name', isSearch: true },
        { label: '申报日期', model: 'apply_time' },
        {
          label: '申报状态',
          model: 'status',
          format: (i) => {
            let data = this.statusList.find((r) => r.dict_value == i);
            if (data) return data.dict_label;
          },
        },
      ],
      opera: [
        { label: '详情', method: 'view' },
        { label: '审核', method: 'exam', type: 'warning', display: (i) => i.status == '0' },
        { label: '导出', method: 'export' },
      ],
      list: [],
      total: 0,
      // 领域
      fieldList: [],
      // 审核状态
      statusList: [],
      dialog: { title: '信息审核', show: false, type: '1' },
      form: {},
      rules: {
        status: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
        remark: [{ required: true, message: '请输入审核意见', trigger: 'blur' }],
      },
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...mapActions(['query', 'update']),
    ...unitStudioApply({ CFetch: 'fetch' }),
    ...message({ mCreate: 'create' }),
    ...sysdictdata({ sQuery: 'query' }),
    async search({ skip = 0, limit = this.$limit, ...info } = {}) {
      let res = await this.query({ skip, limit, ...info, ...this.searchInfo });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    btSearch(query) {
      this.$set(this, `searchInfo`, query);
      this.search();
    },
    // 详情
    toView({ data }) {
      this.$router.push({ path: '/center/studio/info/info', query: { id: data.id } });
    },
    // 导出
    toExport({ data }) {
      this.$router.push({
        path: '/center/studio/info/export',
        query: { id: data._id, company_id: data.company_id, scientistinfo_id: data.scientistinfo_id },
      });
    },
    // 审核
    toExam({ data }) {
      this.$set(this, `form`, data);
      this.dialog = { title: '信息审核', show: true, type: '1' };
    },
    // 提交审核
    toSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = this.form;
          let obj = { id: data._id, status: data.status };
          let res = await this.update(obj);
          if (this.$checkRes(res, `信息审核成功`, res.errmsg)) this.createMess(data);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 发送系统消息
    async createMess(data) {
      let res = await this.CFetch(data.user_id);
      if (this.$checkRes(res)) {
        let status = this.statusList.find((r) => r.dict_value == data.status);
        if (status) {
          let obj = {
            user_id: this.user._id,
            title: '审核通知',
            send_time: moment().format('YYYY-MM-DD HH:mm:ss'),
            type: '3',
            user: [{ id: data.user_id, company: data.company, phone: res.data.phone }],
            content: '您好，您所申报《' + data.name + '》的建设申请，' + status.dict_label + ',原因：' + data.remark,
          };
          let arr = await this.mCreate(obj);
          if (this.$checkRes(arr, `系统信息发送成功`, arr.errmsg)) this.toClose();
        }
      }
    },
    // 关闭弹框
    toClose() {
      this.form = {};
      this.dialog = { title: '信息审核', show: false, type: '1' };
      this.search();
    },
    // 查询其他信息
    async searchOther() {
      let res;
      // 申报状态
      res = await this.sQuery({ dict_type: 'studio_studio_status' });
      if (this.$checkRes(res)) {
        this.$set(this, `statusList`, res.data);
      }
      // 领域
      res = await this.sQuery({ dict_type: 'studio_field' });
      if (this.$checkRes(res)) {
        this.$set(this, `fieldList`, res.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

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