<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'equipment.create'">新增</el-button>
      </div>
      <div class="right-panel">
        <el-cascader v-model="query.belong_dept" :options="group" :props="groupsProps" clearable placeholder="所在车间"
          :show-all-levels="false">
        </el-cascader>
        <el-input v-model="query.search" placeholder="设备名称/编号" clearable style="width:200px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" row-key="id" stripe :params="query">
        <el-table-column type="index" width="50" />
        <el-table-column label="设备名称" prop="name" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="设备编号" prop="number">
        </el-table-column>
        <el-table-column label="型号规格" prop="model">
        </el-table-column>
        <el-table-column label="生产厂" prop="factory" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="生产日期" prop="production_date">
        </el-table-column>
        <el-table-column label="购置日期" prop="buy_date">
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.state === 10" type="success">
              {{ state_[scope.row.state] }}
            </el-tag>
            <el-tag v-else-if="scope.row.state === 20" type="warning">
              {{ state_[scope.row.state] }}
            </el-tag>
            <el-tag v-else-if="scope.row.state === 30">
              {{ state_[scope.row.state] }}
            </el-tag>
            <el-tag v-else type="danger">
              {{ state_[scope.row.state] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="所在车间" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.belong_dept_name }}</template>
        </el-table-column>
        <el-table-column label="所在工段" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.mgroup_name }}</template>
        </el-table-column>
        <el-table-column label="保管人">
          <template #default="scope">{{ scope.row.keeper_name }}</template>
        </el-table-column>
        <el-table-column label="存放位置" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.place }}</template>
        </el-table-column>
        <el-table-column label="备注" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.description }}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="left" width="180">
          <template #default="scope">
            <el-button link type="primary" @click="table_record(scope.row)" v-auth="'echeckrecord.create'">
              巡检
            </el-button>
            <el-button link type="warning" @click="table_edit(scope.row)" v-auth="'equipment.update'">
              编辑
            </el-button>
            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)" v-auth="'equipment.delete'">
              <template #reference>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess"
    @closed="dialog.save = false"></save-dialog>
  <el-drawer title="巡检记录" v-model="visibleRecord" :size="1000" destroy-on-close @closed="visibleRecord = false">
    <el-container v-loading="loading">
      <el-button type="primary" icon="el-icon-plus" @click="record_create" v-auth="'equipment'"
        style="position: absolute;z-index: 10;left: 110px;top: 16px;">新增</el-button>
      <el-button type="primary" icon="el-icon-download" @click="exportExcel"
        style="position: absolute;z-index: 10;left:200px;top: 16px;">导出</el-button>
      <el-main style="padding: 0 20px 20px 20px">
        <scTable ref="drawer_table" :apiObj="apiObj2" row-key="id" stripe :params="query2">
          <el-table-column type="index" width="50" />
          <el-table-column label="设备名称" prop="equipment_name" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="巡检时间" prop="inspect_time">
          </el-table-column>
          <el-table-column label="巡检结果" prop="result">
            <template #default="scope">
              <span>{{ results_[scope.row.result] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="巡检人" prop="inspect_user_name">
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="160px">
            <template #default="scope">
              <el-link type="danger" @click="record_del(scope.row)" v-auth="'equipment.delete'">
                删除
              </el-link>
            </template>
          </el-table-column>
        </scTable>
        <scTable ref="drawer_table" :apiObj="apiObj2" row-key="id" stripe :params="query2" id="myTable"
          style="display: none;">
          <el-table-column type="index" width="50" />
          <el-table-column label="设备名称" prop="equipment_name" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="巡检时间" prop="inspect_time">
          </el-table-column>
          <el-table-column label="巡检结果" prop="result">
            <template #default="scope">
              <span>{{ results_[scope.row.result] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="巡检人" prop="inspect_user_name">
          </el-table-column>
        </scTable>
      </el-main>
    </el-container>
  </el-drawer>
  <el-dialog title="设备巡检" v-model="visible">
    <el-form ref="dialogForm" :rules="rules" label-width="100px" :model="form">
      <el-row>
        <el-col :md="12" :sm="24" prop="inspect_time">
          <el-form-item label="巡检时间">
            <el-date-picker v-model="form.inspect_time" type="datetime" placeholder="巡检时间"
              value-format="YYYY-MM-DD HH:mm:ss" style="width:100%">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="巡检人" prop="inspect_user">
            <span style="display:flex">
              <el-input readonly v-model="form.inspect_user_name"></el-input>
              <ehsUserSelect :multiple="false" @submit="getReceptionist" />
            </span>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="巡检结果" prop="result">
            <el-select style="width: 100%" v-model="form.result" placeholder="巡检结果">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="备注">
            <el-input v-model="form.note" placeholder="备注" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-footer>
      <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
      <el-button @click="visible = false">取消</el-button>
    </el-footer>
  </el-dialog>
</template>
<script>
import saveDialog from "./equipment_form.vue";
import { genTree } from "@/utils/verificate";
export default {
  name: "治理设备",
  components: {
    saveDialog,
  },
  data() {
    return {
      deptOptions: [],
      dialog: {
        save: false,
      },
      apiObj: this.$API.em.equipment.list,
      paramsEquipment: { type: 30 },
      query: { type: 30 },
      apiObj2: this.$API.em.einspect.list,
      query2: {
        equipment: ''
      },
      group: [],
      selection: [],
      state_: {
        10: '完好',
        20: '限用',
        30: '在修',
        40: '禁用',
      },
      groupsProps: {
        // value: "id",
        multiple: false,
        emitPath: false,
        checkStrictly: true,
      },
      // stateOptions: [
      //   { label: '完好', value: 10 },
      //   { label: '限用', value: 20 },
      //   { label: '在修', value: 30 },
      //   { label: '禁用', value: 40 },
      // ],
      results_: {
        'pass': '合格',
        'fail': '不合格',
      },
      options: [
        { id: 'pass', name: '合格' },
        { id: 'fail', name: '不合格' }
      ],
      form: {},
      rules: {
        check_date: [{ required: true, message: "请选择检验时间" }],
        check_organization: [{ required: true, message: "请填写检定机构" }],
      },
      item: {},
      visible: false,
      visibleRecord: false,
      excelName: ''
    };
  },
  mounted() {
    this.getDept()
  },
  methods: {
    getDept() {
      let that = this;
      that.$API.system.dept.list.req({ page: 0 }).then(res => {
        that.group = genTree(res);
      });

    },
    getReceptionist(data) {
      this.form.inspect_user = data.id;
      this.form.inspect_user_name = data.name;
    },
    //添加
    add() {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("add", 10);
      });
    },
    //编辑
    table_edit(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("edit", 10).setData(row);
      });
    },
    //查看
    table_show(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("show", 10).setData(row);
      });
    },
    table_record(row) {
      this.item = row;
      this.form.equipment = row.id;
      this.query2.equipment = row.id;
      this.excelName = row.name;
      this.$nextTick(() => {
        this.visibleRecord = true;
      })
    },
    //新增检验
    record_create() {
      this.visible = true;
    },
    //提交巡检记录
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          this.$API.em.einspect.create.req(this.form).then(res => {
            this.visible = false;
            this.isSaveing = false;
            this.$message.success("操作成功");
            this.$refs.drawer_table.refresh();
          }).catch(() => {
            this.isSaveing = false;
          })
        }
      });
    },
    //删除
    async table_del(row) {
      this.$API.em.equipment.delete
        .req(row.id)
        .then((res) => {
          this.$message.success("删除成功");
          return res;
        })
        .catch((err) => {
          return err;
        });
    },

    //本地更新数据
    handleSaveSuccess(data, mode) {
      if (mode == "add") {
        this.$refs.table.refresh();
      } else if (mode == "edit") {
        this.$refs.table.refresh();
      }
    },
    handleQuery() {
      this.$refs.table.queryData(this.query)
    },
    resetQuery() {
      this.query = {};
    },
    exportExcel() {
      this.exportLoading = true;
      this.$XLSX('#myTable', this.excelName)
      this.exportLoading = false;
    },
  },
};
</script>