<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-select
            v-model="query.is_deleted"
            placeholder="筛选"
            @change="handleQuery"
            clearable
            style="margin-left: 2px"
          >
            <el-option label="在用" :value="false"></el-option>
            <el-option label="已删" :value="true"></el-option>
        </el-select>
        <el-input v-model="query.search" placeholder="设备名称/编号" clearable style="margin-right: 5px;"></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="selection" 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="meter_type">
        </el-table-column>
        <el-table-column label="量范" prop="measurement_range">
        </el-table-column>
        <el-table-column label="出厂编号" prop="number_factory">
        </el-table-column>
        <el-table-column label="启用日期" prop="use_date">
        </el-table-column>
        <el-table-column label="用电功率(kw)" prop="power_kw">
        </el-table-column>
        <el-table-column label="设备重要性" prop="importance">
          <template #default="scope">
            <el-tag v-if="scope.row.importance === 10" type="A">
              {{ importance[scope.row.importance] }}
            </el-tag>
            <el-tag v-else-if="scope.row.importance === 20" type="B">
              {{ importance[scope.row.importance] }}
            </el-tag>
            <el-tag v-else-if="scope.row.importance === 30" type="C">
              {{ importance[scope.row.importance] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="生产厂家" prop="factory" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="检定周期/月" prop="cycle" width="100">
        </el-table-column>
        <el-table-column label="检定日期" prop="check_date" width="100">
          <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="下次检定日期" prop="next_check_date" width="100">
        </el-table-column>
        <el-table-column label="精度等级" prop="accuracy_level" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="安装位置" prop="place" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="设备负责人" prop="device_people" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="更新时间" prop="update_time"></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="center" width="170px">
          <template #default="scope">
            <el-button link type="primary" v-if="scope.row.cycle !== null" @click="table_record(scope.row)"
              v-auth="'echeckrecord.create'">
              检定记录
            </el-button>
            <el-button link type="primary" @click="table_edit(scope.row)" v-auth="'equipment.update'">
              编辑
            </el-button>
            <el-button link type="danger" @click="table_del(scope.row)" v-auth="'equipment.delete'">
              删除
            </el-button>
          </template>
        </el-table-column>
      </scTable>
      <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="check_date">
              <el-form-item label="检定时间">
                <el-date-picker v-model="form.check_date" type="date" placeholder="检定时间" value-format="YYYY-MM-DD"
                  style="width:100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="检定单位" prop="check_organization">
                <el-input v-model="form.check_organization" placeholder="检定单位" />
              </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>
      <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="'echeckrecord.create'"
            style="position: absolute;z-index: 10;left: 110px;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="check_date">
              </el-table-column>
              <el-table-column label="检定结果" prop="result">
                <template #default="scope">
                  <span>{{ state_[scope.row.result] }}</span>
                </template>
              </el-table-column>
              <el-table-column label="检定单位" prop="check_organization">
              </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="'echeckrecord.delete'">
                    删除
                  </el-link>
                </template>
              </el-table-column>
            </scTable>
          </el-main>
        </el-container>
      </el-drawer>
    </el-main>
  </el-container>
  <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" :eqtype="20"
    @closed="dialog.save = false"></save-dialog>
</template>
<script>
import saveDialog from "./equipment_form.vue";
export default {
  name: "监测设备-cems/tsp/小微站",
  components: {
    saveDialog,
  },
  data() {
    return {
      dialog: {
        save: false,
        permission: false,
      },
      apiObj: this.$API.em.equipment.list,
      query: {
        page: 1,
        page_size: 20,
        type: 20,
      },
      apiObj2: this.$API.em.echeckrecord.list,
      query2: {
        page: 1,
        page_size: 20,
        equipment: ''
      },
      visible: false,
      isSaveing: false,
      visibleRecord: false,
      selection: [],
      state_: {
        10: '完好',
        20: '限用',
        30: '在修',
        40: '禁用',
      },
      importance: {
        10: 'A',
        20: 'B',
        30: 'C',
      },
      options: [
        { id: 10, name: '正常' },
        { id: 20, name: '异常' }
      ],
      form: {},
      rules: {
        check_date: [{ required: true, message: "请选择检验时间" }],
        check_organization: [{ required: true, message: "请填写检定机构" }],
      },
      item: {},
    };
  },
  methods: {
    table_record(row) {
      this.item = row;
      this.form.equipment = row.id;
      this.query2.equipment = row.id;
      this.$nextTick(() => {
        this.visibleRecord = true;
      })
    },
    //添加
    add() {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("add", 20);
      });
    },
    //编辑
    table_edit(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("edit", 20).setData(row);
      });
    },
    //查看
    table_show(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("show", 20).setData(row);
      });
    },
    //删除
    async table_del(row) {
      this.$API.em.equipment.delete
        .req(row.id)
        .then((res) => {
          this.$message.success("删除成功");
          this.$refs.table.refresh();
        })
        .catch((err) => {
          return err;
        });
    },
    //新增检验
    record_create() {
      this.visible = true;
    },
    //提交检验
    submit() {
      let that = this;
      that.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          that.isSaveing = true;
          that.$API.em.echeckrecord.create.req(that.form).then(res => {
            that.visible = false;
            that.isSaveing = false;
            that.$message.success("操作成功");
            that.$refs.drawer_table.refresh();
            that.$refs.table.refresh();
          }).catch(() => {
            that.isSaveing = false;
          })
        }
      });
    },
    //删除检验
    record_del(row) {
      let that = this;
      this.$API.em.echeckrecord.delete.req(row.id).then((res) => {
        that.$message.success("删除成功");
        that.$refs.drawer_table.refresh();
        that.$refs.table.refresh();
      }).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 = {};
    },
  },
};
</script>