<template>
  <div class="app-container">
    <el-form :inline="true" ref="query" :model="query" size="mini">
      <el-form-item label="姓名" prop="uuid">
        <el-select v-model="query.uuid" filterable placeholder="请输入姓名">
          <el-option v-for="(item, index) in queryList" :key="index" :label="item.username" :value="item.uuid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业" prop="profession">
        <el-input v-model="query.profession" placeholder="请输入专业"></el-input>
      </el-form-item>
      <el-form-item label="技术职称" prop="technical_titles">
        <el-input v-model="query.technical_titles" placeholder="请输入技术职称"></el-input>
      </el-form-item>
      <el-form-item label="安全评价师等级" prop="safe_occu_level">
        <el-input v-model="query.safe_occu_level" placeholder="请输入安全评价师等级"></el-input>
      </el-form-item>
      <el-form-item label="安全评价师专业" prop="safe_occu_level_profe">
        <el-input v-model="query.safe_occu_level_profe" placeholder="请输入安全评价师专业"></el-input>
      </el-form-item>
      <el-form-item label="注册安全工程师" prop="is_reg_safe_engineer">
        <el-select v-model="query.is_reg_safe_engineer" placeholder="是否是注册安全工程师">
          <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="省专家库成员" prop="is_prov_exp_db_staff">
        <el-select v-model="query.is_prov_exp_db_staff" placeholder="是否是省专家库成员">
          <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评审行业" prop="review_industry">
        <el-input v-model="query.review_industry" placeholder="请输入评审行业"></el-input>
      </el-form-item>
      <el-form-item label="报告撰写能力" prop="report_writing_ability">
        <el-input v-model="query.report_writing_ability" placeholder="请输入报告撰写能力"></el-input>
      </el-form-item>
      <el-form-item label="培训领域" prop="training_field">
        <el-input v-model="query.training_field" placeholder="请输入培训领域"></el-input>
      </el-form-item>
      <el-form-item label="咨询范围" prop="consult_scope">
        <el-input v-model="query.consult_scope" placeholder="请输入咨询范围"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset('query')">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="onAdd">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-popover placement="top-start" width="180" trigger="click">
          <el-checkbox-group :min="1" v-model="checkList" @change="onCheckboxChange">
            <el-checkbox :label="item" v-for="(item, index) in headerList" :key="index"></el-checkbox>
          </el-checkbox-group>
          <el-button type="success" slot="reference">表头设置</el-button>
        </el-popover>
      </el-form-item>
      <el-form-item>
        <el-button type="info" plain @click="handleDownload">导出当前数据</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="isLoading"
      element-loading-text="Loading"
      :data="tableData"
      size="mini"
      border
      stripe
      fit
      highlight-current-row
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <formpage :data="props.row" :isReadOnly="true"></formpage>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :align="item.align"
        :min-width="item.width"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="160" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page-wrapper">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="query.pagenum"
        background
        small
        :page-size="query.pagesize"
        :pager-count="5"
        layout="pager, prev, next, total"
        :total="total"
      ></el-pagination>
    </div>
    <formdialog
      ref="formdialog"
      :title="dialogTitle"
      :visible="dialogVisible"
      :width="'70%'"
      @close="dialogVisible = false"
      @confirm="submitForm"
    ></formdialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import { mapTrim } from "@/utils/index";
// import { formatUTCDateTime } from "@/utils/utils";
import { exportJsonToExcel } from "@/utils/excel";

import formdialog from "./dialog";
import formpage from "./form";

const fieldList = [
  { label: "姓名", prop: "username", isShow: true, align: "center", width: "150" },
  { label: "性别", prop: "gender", isShow: true, align: "center", width: "60" },
  { label: "身份证号", prop: "identity_number", isShow: true, align: "center", width: "150" },
  { label: "联系方式", prop: "contact", isShow: true, align: "center", width: "100" },
  { label: "邮箱", prop: "email", isShow: true, align: "center", width: "150" },
  { label: "目前住址", prop: "address", isShow: true, align: "center", width: "150" },
  { label: "毕业院校", prop: "graduated_school", isShow: true, align: "center", width: "150" },
  { label: "行业及专业", prop: "industry_profession", isShow: true, align: "center", width: "150" },
  { label: "文化程度", prop: "education", isShow: true, align: "center", width: "80" },
  { label: "安全评价师等级", prop: "safe_occu_level", isShow: false, align: "center", width: "150" },
  { label: "安全评价师专业", prop: "safe_occu_level_profe", isShow: false, align: "center", width: "150" },
  { label: "技术职称", prop: "technical_titles", isShow: false, align: "center", width: "150" },
  { label: "注册安全工程师", prop: "is_reg_safe_engineer", isShow: false, align: "center", width: "150" },
  { label: "评审员等级", prop: "reviewer_level", isShow: false, align: "center", width: "150" },
  { label: "评审行业", prop: "review_industry", isShow: false, align: "center", width: "150" },
  { label: "评审员证书编号", prop: "reviewer_cert_number", isShow: false, align: "center", width: "150" },
  { label: "省专家库人员", prop: "is_prov_exp_db_staff", isShow: false, align: "center", width: "150" },
  { label: "行业及专业", prop: "industry_profession", isShow: false, align: "center", width: "150" },
  { label: "专家证书编号", prop: "exp_cert_number", isShow: false, align: "center", width: "150" },
  { label: "所在区域", prop: "area", isShow: false, align: "center", width: "150" },
  { label: "报告撰写能力", prop: "report_writing_ability", isShow: false, align: "center", width: "150" },
  { label: "技术专家范围", prop: "tech_experts_range", isShow: false, align: "center", width: "150" },
  { label: "合作方式", prop: "cooperation_method", isShow: false, align: "center", width: "150" },
  { label: "收费水平", prop: "fee_level", isShow: false, align: "center", width: "150" },
  { label: "人员评价", prop: "person_evaluation", isShow: false, align: "center", width: "150" },
  { label: "来源", prop: "origin", isShow: false, align: "center", width: "150" },
  { label: "培训领域", prop: "training_field", isShow: false, align: "center", width: "150" },
  { label: "咨询范围", prop: "consult_scope", isShow: false, align: "center", width: "150" },
  { label: "分类", prop: "category", isShow: false, align: "center", width: "150" }
]

const tableHeader = fieldList.filter(item => {
  if (item.isShow) return item
})

export default {
  name: "Resources",
  components: {
    formdialog,
    formpage,
  },
  data() {
    return {
      total: 0,
      tableData: [],
      isLoading: false,
      checkList: tableHeader.map(item => item.label),
      headerList: fieldList.map(item => item.label),
      query: {
        uuid: null,
        technical_titles: null,
        profession: null,
        safe_occu_level: null,
        safe_occu_level_profe: null,
        is_reg_safe_engineer: null,
        is_prov_exp_db_staff: null,
        review_industry: null,
        report_writing_ability: null,
        training_field: null,
        consult_scope: null,
        pagesize: 15,
        pagenum: 1,
      },
      dialogTitle: "",
      dialogVisible: false,
      queryList: [],
      urlPrefix: "/api/v1/evm_store/techResources",
      tableHeader: tableHeader,
      options: [
        {
          label: "是",
          value: "是",
        },
        {
          label: "否",
          value: "否",
        },        
      ]
    };
  },
  methods: {
    addItem(params) {
      return request({
        url: this.urlPrefix + `/add`,
        method: "post",
        data: params,
      });
    },
    getItemList(params) {
      return request({
        url: this.urlPrefix + `/list`,
        method: "post",
        data: params,
      });
    },
    updateItem(id, params) {
      return request({
        url: `${this.urlPrefix}/update/${id}`,
        method: "post",
        data: params,
      });
    },
    deleteItem(id) {
      return request({
        url: `${this.urlPrefix}/delete/${id}`,
        method: "post",
      });
    },
    fetchDataList() {
      this.getItemList({ "scope_type": "list" })
        .then((res) => {
          this.queryList = res.data
        })
        .catch((err) => {
          console.log(err.message)
        })
    },
    fetchData(params) {
      this.isLoading = true;
      this.getItemList(
        Object.assign(
          {
            pagenum: this.query.pagenum,
            pagesize: this.query.pagesize,
          },
          params
        )
      )
        .then((res) => {
          this.total = res.count;
          this.tableData = res.data;
        })
        .catch((err) => {
          if (err.code == 204) {
            this.$message.success(err.message);
          } else {
            // this.$message.error(err.message)
            console.log(err.message);
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    handleSizeChange(e) {
      this.query.pagesize = e;
      this.fetchData(mapTrim(this.query));
    },
    handleCurrentChange(e) {
      this.query.pagenum = e;
      this.fetchData(mapTrim(this.query));
    },
    handleEdit(index, row) {
      this.dialogTitle = "编辑";
      this.dialogVisible = true;
      this.$refs["formdialog"].update(row);
    },
    handleDelete(index, row) {
      this.$alert(
        "您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。",
        "删除提醒",
        {
          confirmButtonText: "确定",
          callback: (action) => {
            if (action == "confirm")
              this.deleteItem(row.uuid)
                .then((res) => {
                  console.log(res);
                  this.total -= 1;
                  this.$delete(this.tableData, index);
                  this.$message({
                    type: "success",
                    message: `成功删除第${index + 1}行`,
                  });
                })
                .catch((err) => {
                  this.$message.error(err.message);
                });
          },
        }
      );
    },
    handleDownload() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
       this.getItemList({ "scope_type": "list", "props": this.tableHeader.map(item => item.prop) })
        .then((res) => {
          exportJsonToExcel({
            header: this.tableHeader,
            headerLabel: "label",
            headerProp: "prop",
            jsonData: res.data,
            filename: Date.now()
          })
        })
        .catch((err) => {
          this.$message.warning(err.message)
        }).finally(() => {
          loading.close()
        })
    },
    submitForm(formdata) {
      if (this.dialogTitle === "添加") {
        formdata.area = formdata.address;
        this.addItem(mapTrim(formdata))
          .then((res) => {
            console.log(res);
            this.$message({ type: "success", message: "添加成功" });
            this.fetchData();
          })
          .catch((err) => {
            this.$message.error(err.message);
          });
      } else if (this.dialogTitle === "编辑") {
        this.updateItem(formdata.uuid, mapTrim(formdata))
          .then((res) => {
            console.log(res);
            this.$message({ type: "success", message: "更新成功" });
            this.fetchData();
          })
          .catch((err) => {
            this.$message.error(err.message);
          });
      }
    },
    onCheckboxChange(evt) {
      let header = []
      evt.forEach(f => {
        for(let i = 0 ; i < fieldList.length; i++) {
          if (fieldList[i].label === f) {
            header.push(fieldList[i])
            break
          }
        }
      })
      this.tableHeader = header
    },
    onAdd() {
      this.dialogTitle = "添加";
      this.dialogVisible = true;
    },
    onQuery() {
      this.query.pagenum = 1;
      this.query.pagesize = 15;
      this.fetchData(mapTrim(this.query));
    },
    onReset(formName) {
      this.$refs[formName].resetFields();
      this.query.pagenum = 1;
      this.query.pagesize = 15;
      this.fetchData();
    },
  },
  mounted() {},
  created() {
    this.fetchData();
    this.fetchDataList();
  },
};
</script>

<style lang="less" scoped>
.app-container {
  & > div.page-wrapper {
    margin: 10px 0px;
  }
}
</style>