<!--
 * @Author: Do not edit
 * @Date: 2023-06-20 11:16:51
 * @LastEditTime: 2023-07-14 15:53:22
 * @LastEditors: DY
 * @Description: 评估计划
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="供应商名称">
          <el-input v-model="formInline.supplierName" placeholder="供应商"></el-input>
        </el-form-item>
        <el-form-item label="评估模板">
          <el-select v-model="formInline.evaluationTemplateId" filterable clearable placeholder="评估模板">
            <el-option
              v-for="item in modalOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评估类型">
          <el-select v-model="formInline.evaluationType" clearable placeholder="评估类型">
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        v-loading="dataListLoading"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="供应商列表">
                <el-tag type="success" v-for="(item, index) in props.row.list" :key="index">{{ item.supplierName }}</el-tag>
              </el-form-item>
              <br>
              <el-form-item label="负责人列表">
                <el-tag>{{ props.row.evaluatorName }}</el-tag>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="评估类型"
          prop="evaluationType">
          <template slot-scope="slot">
            <el-tag :type="slot.row.evaluationType === 0 ? 'info' : slot.row.evaluationType === 1 ? 'success' : ''" effect="dark">{{ slot.row.evaluationType === 0 ? '年度' : slot.row.evaluationType === 1 ? '季度' : '月度' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="标题"
          prop="title">
        </el-table-column>
        <el-table-column
          label="评估模板"
          prop="evaluationTemplateName">
          <template slot-scope="slot">
            <el-tag type="danger" effect="plain">{{ slot.row.evaluationTemplateName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="说明"
          prop="description">
        </el-table-column>
        <el-table-column
          label="上次启动时间"
          prop="lastStartTime">
        </el-table-column>
        <el-table-column
          label="上次启动评估时间段"
          prop="lastStartEvaluationPeriod">
        </el-table-column>
        <el-table-column
          label="预计下次启动时间"
          prop="estimatedNextStartTime">
        </el-table-column>
        <el-table-column
          label="提醒人"
          prop="reminder">
        </el-table-column>
        <el-table-column
          label="操作"
          width="160"
          prop="desc">
          <template slot-scope="slot">
            <el-button type="text" @click="start(slot.row)">启动</el-button>
            <el-button type="text" @click="editPlan(slot.row)">edit</el-button>
            <el-button type="text" @click="deletePlan(slot.row)" style="color: red">delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-button class="carcleButton" @click="addPlanButon">+</el-button>
    </div>
    <add-plan v-if="addtModelVisible" @refreshDataList="onSubmit"></add-plan>
    <base-dialog dialogTitle="start" :dialogVisible="addOrUpdateVisible" @cancel="handleCancel" @confirm="handleConfirm" :before-close="handleCancel">
      <start-plan ref="addOrUpdate" @refreshDataList="closeSucess"></start-plan>
    </base-dialog>
  </el-card>
</template>

<script>
import addPlan from './components/addPlan.vue'
import startPlan from './components/startPlan.vue'

export default {
  components: { addPlan, startPlan },
  data() {
    return {
      urlOptions: {
        getDataListURL: "/supplier/qmsEvaluationPlan/page",
        getTemplateListURL: '/supplier/qmsEvaluationTemplate/page',
        deleteURL: '/supplier/qmsEvaluationPlan'
      },
      dataListLoading: false,
      addtModelVisible: false,
      typeOptions: [
        {
          name: '年度',
          id: 0
        },
        {
          name: '季度',
          id: 1
        },
        {
          name: '月度',
          id: 2
        }
      ],
      modalOptions: [],
      addOrUpdateVisible: false,
      formInline: {
        page: 1,
        limit: 10,
        evaluationTemplateId: undefined,
        evaluationType: undefined,
        supplierName: '',
        total: 0
      },
      tableData: []
    }
  },
  mounted() {
    this.getTemplate()
    this.onSubmit()
  },
  methods: {
    closeSucess() {
      this.addOrUpdateVisible = false
      this.onSubmit()
    },
    handleCancel() {
      // this.$refs.addOrUpdate.formClear()
      this.addOrUpdateVisible = false
      // this.addOrEditTitle = ''
    },
    handleConfirm() {
      this.$refs.addOrUpdate.dataFormSubmit()
    },
    start(val) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(val);
      });
    },
    editPlan(val) {},
    deletePlan(val) {
      this.$confirm(`确定对[名称=${val.title}]进行删除操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete(this.urlOptions.deleteURL, { data: [val.id] }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.onSubmit();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => { });
    },
    addPlanButon() {
      this.addtModelVisible = true
    },
    getTemplate() {
      this.$http
        .get(this.urlOptions.getTemplateListURL, {
          params: {
            limit: 999,
            page: 1
          },
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.modalOptions = [];
            return this.$message.error(res.msg);
          }
          this.modalOptions = res.data.list;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    onSubmit() {
      this.dataListLoading = true
      this.addtModelVisible = false
      this.$http
        .get(this.urlOptions.getDataListURL, {
          params: this.formInline,
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.tableData = [];
            this.formInline.total = 0;
            return this.$message.error(res.msg);
          }
          this.tableData = res.data.list;
          this.formInline.total = res.data.total;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    }
  }
}
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .carcleButton {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: rgb(196, 193, 193);
  }
</style>
