<template>
  <el-drawer
    title="成品检验"
    v-model="visible"
    destroy-on-close
    size="80%"
    @closed="$emit('closed')"
  >
    <el-container v-loading="loading">
      <el-main style="padding: 0 20px 20px 20px">
        <el-form
          ref="dialogForm"
          :model="form"
          :rules="rules"
          label-width="100px"
        >
          <el-row>
            <!-- 预制棒 -->
            <sc-form-table
              v-model="form.ftestitems"
              :addTemplate="addTemplate"
              placeholder="暂无数据"
            >
              <el-table-column prop="val" label="抽检编号">
                <template #default="scope">
                  <span v-if="scope.row.id">{{scope.row.name}}</span>
                  <el-input v-else v-model="scope.row.name" placeholder="名称"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="检验记录" align="center">
                <el-table-column prop="test_val" label="长度/mm">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="直径/mm">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="椭圆度/mm">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="锥度/mm">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="结石、沙石、黑点">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="条纹">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="气泡">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="test_val" label="合格判定" min-width="120" align="center">
                <template #default="scope">
                  <el-select 
                    v-model="scope.row.is_ok"
                    placeholder="是否合格"
                    clearable
                    style="width:100%"
                  >
                    <el-option label="是" value="true"/>
                    <el-option label="否" value="false"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="test_user" label="检验人" min-width="120" align="center">
                <template #default="scope">
                  <el-select 
                    v-model="scope.row.test_user"
                    placeholder="检验人"
                    clearable
                    style="width:100%"
                  >
                    <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="open" label="操作" width="80" align="center">
                <template #default="scope">
                  <el-button
                    text
                    type="danger"
                    size="small"
                    @click="userPostDel(scope.row.id)"
                    >删除</el-button>
                </template>
              </el-table-column>
            </sc-form-table>
            <!-- 预制管 -->
            <sc-form-table
              v-model="form.ftestitems"
              :addTemplate="addTemplate"
              placeholder="暂无数据"
            >
              <el-table-column prop="val" label="抽检编号">
                <template #default="scope">
                  <span v-if="scope.row.id">{{scope.row.name}}</span>
                  <el-input v-else v-model="scope.row.name" placeholder="名称"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="检验记录" align="center">
                <el-table-column prop="test_val" label="长度/mm">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="内径/mm">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="椭圆度/mm">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="壁厚/mm">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="壁厚偏差/mm">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="锥度/mm">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="气泡(线)">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="结石、杂志">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="条纹">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="划伤">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="test_val" label="水雾">
                  <template #default="scope">
                    <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                    </el-input-number>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="test_val" label="合格判定" min-width="120" align="center">
                <template #default="scope">
                  <el-select 
                    v-model="scope.row.is_ok"
                    placeholder="是否合格"
                    clearable
                    style="width:100%"
                  >
                    <el-option label="是" value="true"/>
                    <el-option label="否" value="false"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="test_user" label="检验人" min-width="120" align="center">
                <template #default="scope">
                  <el-select 
                    v-model="scope.row.test_user"
                    placeholder="检验人"
                    clearable
                    style="width:100%"
                  >
                    <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="open" label="操作" width="80" align="center">
                <template #default="scope">
                  <el-button
                    text
                    type="danger"
                    size="small"
                    @click="userPostDel(scope.row.id)"
                    >删除</el-button>
                </template>
              </el-table-column>
            </sc-form-table>
          </el-row>
          <el-table :data="form.ftestitems" border placeholder="暂无数据">
            <el-table-column prop="testitem" label="抽检编号" min-width="100" align="center">
              <template #default="scope">
                <span>{{ scope.row.testName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="检验记录" align="center">
              <el-table-column prop="test_val" label="长度/mm" min-width="120" align="center">
                <template #default="scope">
                  <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                  </el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="test_val" label="直径/mm" min-width="120" align="center">
                <template #default="scope">
                  <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                  </el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="test_val" label="椭圆度/mm" min-width="120" align="center">
                <template #default="scope">
                  <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                  </el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="test_val" label="锥度/mm" min-width="120" align="center">
                <template #default="scope">
                  <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                  </el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="test_val" label="结石、沙石、黑点" min-width="120" align="center">
                <template #default="scope">
                  <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                  </el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="test_val" label="条纹" min-width="120" align="center">
                <template #default="scope">
                  <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                  </el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="test_val" label="气泡" min-width="120" align="center">
                <template #default="scope">
                  <el-input-number v-model="scope.row.test_val" :min="0" style="width:100%" controls-position="right">
                  </el-input-number>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="test_val" label="合格判定" min-width="120" align="center">
              <template #default="scope">
                <el-select 
                  v-model="scope.row.is_ok"
                  placeholder="是否合格"
                  clearable
                  style="width:100%"
                >
                  <el-option label="是" value="true"/>
                  <el-option label="否" value="false"/>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
        <el-button @click="visible = false">取消</el-button>
      </el-footer>
    </el-container>
  </el-drawer>
</template>
<script>
export default {
  emits: ["success", "closed"],
  data() {
    return {
      loading: false,
      form: {
        ftestitems:[
          // {testitem:'椭圆度(≤0.02mm)',test_val:'',check_val:''},
          // {testitem:'锥度(≤0.05mm)',test_val:'',check_val:''},
          // {testitem:'直径(≥29.0)',test_val:'',check_val:''},
          // {testitem:'长度(≥455mm)',test_val:'',check_val:''},
        ],
      },
      rules: {
          belong_dept: [{required: true, message: "请选择所属部门", trigger: "blur"}],
          test_date: [{required: true, message: "请选择检验日期", trigger: "blur"}],
          test_user: [{required: true, message: "请选择操作人", trigger: "blur"}],
          check_user: [{required: true, message: "请选择专检人", trigger: "blur"}],
          test_group:[{required: true, message: "请选择检测工序集", trigger: "blur"}],
          is_ok: [{required: true, message: "请选择是否合格", trigger: "blur"}],
        },
      visible: false,
      isSaveing: false,
      userList:[],
      options: [],
      processOptions: [],
      deptOptions: [],
      selectionFilters: [],
      setFiltersVisible: false,
      belong_dept_options: [],
      group: [],
    };
  },
  mounted() {
    this.getTextItem();
    this.getProcess();
    this.getUserList();
    this.getDeptOptions();
  },
  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //获取检验项目
    getTextItem(){
      let that = this;
      that.$API.qm.getTestItem.get({tag:'first',page:0}).then(res=>{
        console.log(res)
        let ftestitems = [];
        res.forEach(item=>{
          let obj = {};
          obj.testitem = item.id;
          obj.testName = item.name;
          obj.test_val = 0;
          obj.check_val = 0;
          ftestitems.push(obj)
        })
        console.log(ftestitems)
        that.form.ftestitems = ftestitems;
      })
    },
    //获取部门列表
    getDeptOptions() {
        this.$API.system.dept.list.req({ page: 0, type__in: 'dept' }).then((res) => {
            this.deptOptions = res;
        });
    },
    //获取员工
    getUserList(){
      let that = this;
      this.$API.system.user.list.req({page_size:20,page:1}).then(res=>{
        that.userList = res.results;
      });
    },
    getProcess(){
      let that = this;
      this.$API.mtm.process.list.req({page:0}).then(res=>{
        that.processOptions = res;
      })
    },
    //提交
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          try {
            var res;
            this.form.test_group = this.form.test_group.join(',')
            if (this.mode == "add") {
              res = await this.$API.qm.ftest.create.req(this.form);
            } else if (this.mode == "edit") {
              res = await this.$API.qm.ftest.update.req(this.form.id,this.form);
            }
            this.isSaveing = false;
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          } catch (err) {
            //可以处理校验错误
            this.isSaveing = false;
            return err;
          }
        }
      });
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.form, data);
      this.form.test_group = this.form.split(',')
    },
    //设置过滤项
    setFilters(filters) {
      this.selectionFilters = filters;
      this.setFiltersVisible = true;
    },
  },
};
</script>

<style>
</style>
