<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
      </div>
      <div class="right-panel">
        <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="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.parameter }}</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">
          <template #default="scope">
            <el-link
              type="primary"
              @click="table_record (scope.row)"
              v-auth="'equipment'"
            >
            巡检记录
            </el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link
              type="primary"
              @click="table_edit(scope.row)"
              v-auth="'equipment'"
            >
              编辑
            </el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link
              type="danger"
              @click="table_del(scope.row)"
              v-auth="'equipment'"
            >
              删除
            </el-link>
          </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-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="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="production_date">
              </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>
          </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-form-item label="巡检人" prop="inspect_user">
                <el-select 
                  v-model="form.inspect_user"
                  placeholder="巡检人"
                  clearable
                  style="width:100%"
                >
                  <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  />
                </el-select>
              </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";
export default {
  name: "rparty",
  components: {
    saveDialog,
  },
  data() {
    return {
      dialog: {
        save: false,
      },
      apiObj: this.$API.em.equipment.list,
      query: {
        page:1,
        page_size:20,
        type:10
      },
      apiObj2: this.$API.em.einspect.list,
      query2: {
        equipment:''
      },
      selection: [],
      state_: {
          10: '完好',
          20: '限用',
          30: '在修',
          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,
    };
  },
  mounted(){
    this.getUserList();
  },
  methods: {
    //获取员工
    getUserList(){
      let that = this;
      this.$API.system.user.list.req({page_size:20,page:1}).then(res=>{
        that.userList = res.results;
      });
    },
    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.$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 = {};
    },
  },
};
</script>