<template>
    <div class="app-container">
      <el-card>
        <div>
          <el-button
            v-if="checkPermission(['material_create'])"
            type="primary"
            icon="el-icon-plus"
          >
            新增
          </el-button>
        </div>
      </el-card>
      <el-card style="margin-top: 2px">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          fit
          stripe
          highlight-current-row
          height="100"
          v-el-height-adaptive-table="{bottomOffset: 42}"
        >
          <el-table-column type="index" width="50"/>
          <el-table-column label="区域">
            <template slot-scope="scope">{{ scope.row.area__name }}</template>
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">{{ scope.row.type__dickeyname }}</template>
          </el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="级别">
            <template slot-scope="scope">
              <el-tag type="success" effect="plain">{{ scope.row.level }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="层级">
            <template slot-scope="scope">{{ scope.row.gkcj }}</template>
          </el-table-column>
          <el-table-column label="责任部门">
            <template slot-scope="scope">{{ scope.row.zrbm__partname }}</template>
          </el-table-column>
          <el-table-column label="责任人">
            <template slot-scope="scope">{{ scope.row.zrr__name }}</template>
          </el-table-column>
          <el-table-column label="岗位">
            <template slot-scope="scope">{{ scope.row.group__groupname }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            width="220px"
          >
            <template slot-scope="scope">
              <el-link type="danger">
                删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="materialList.count > 0"
          :total="materialList.count"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.page_size"
          @pagination="getList"
        />
      </el-card>
      <el-dialog
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        title="新增风险"
      >
        <el-form
          ref="Form"
          :model="material"
          label-width="100px"
          label-position="right"
          :rules="rule1"
        >
          <el-form-item label="分线区域">
            <el-input v-model="material.number" placeholder="分线区域"/>
          </el-form-item>
          <el-form-item label="类型">
            <el-select style="width: 100%" v-model="material.type" placeholder="请选择">
              <el-option
                v-for="item in typeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="material.name" placeholder="规格型号"/>
          </el-form-item>
          <el-form-item label="级别">
            <el-select style="width: 100%" v-model="material.level" placeholder="请选择">
              <el-option
                v-for="item in leveloptions"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管控层级">
            <el-select style="width: 100%" v-model="material.unit" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="具体位置">
            <el-input v-model="material.specification" placeholder="规格型号"/>
          </el-form-item>
        </el-form>
        <div style="text-align: right">
          <el-button type="danger" @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm('Form')">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
    import {
      getMaterialList,
      createMaterial,
      updateMaterial,
      deleteMaterial
    } from "@/api/mtm";
    import checkPermission from "@/utils/permission";
    import Pagination from "@/components/Pagination";
  
    const defaultmaterial = {
      name: null,
      number: null,
      specification: null,
      unit: null,
      type: '',
      piece_count: null,
      sort_str: null,
      count_safe: 0,
      processes: [],
    };
    export default {
      name: "productList",
      components: {Pagination},
      data() {
        return {
          material: defaultmaterial,
          materialList: {
            count: 0,
          },
          options:[ 
            '公司级',
            '部门级',
            '班组级',
            '岗位级',
        ],
        leveloptions:[ 
            '低风险',
            '中风险',
            '高风险',
            '重大风险',
        ],
          typeoptions: [
            {
              value: '设备设施',
              label: '设备设施'
            }, {
              value: '作业活动',
              label: '作业活动'
            }
          ],
          listQuery: {
            type: 1,
            page: 1,
            page_size: 20,
          },
          activeName: "",
          listLoading: true,
          dialogVisible: false,
          dialogType: "new",
          rule1: {
            name: [{required: true, message: "请输入", trigger: "blur"}],
            number: [{required: true, message: "请输入", trigger: "blur"}],
  
          },
          tableData:[
            {
            "area__name": "排土场",
            "type__dickeyname": "设备设施类",
            "name": "挖掘机",
            "level": "低风险",
            "group__groupname": "员工",
            "zrbm__partname": "安健环部",
            "zrr__name": "张城",
            "gkcj": "公司级",
            },
            {
            "area__name": "排土场",
            "type__dickeyname": "作业活动类",
            "name": "挖掘机装载",
            "level": "低风险",
            "group__groupname": "员工",
            "zrbm__partname": "安健环部",
            "zrr__name": "张城",
            "gkcj": "公司级",
            },
          ],
        };
      },
      computed: {},
      watch: {},
      created() {
        this.getList();
        // this.getProcessList();
      },
      methods: {
        checkPermission,
        //成品详情
        handledetail(scope) {
          this.$router.push({name: "MaterialDetail", params: {id: scope.row.id, type: scope.row.type},})
        },
        getList() {
          let that = this;
          that.listLoading = true;
          getMaterialList(this.listQuery).then((response) => {
            if (response.data) {
              that.materialList = response.data;
            }
            that.listLoading = false;
          });
        },
        // //检查表
        // handlebind(scope) {
        //   let materialItem = sessionStorage.getItem('materialItem');
        //   let materialType = sessionStorage.getItem('materialType');
        //   if(materialItem){
        //     sessionStorage.removeItem('materialItem');
        //     sessionStorage.setItem('materialItem',JSON.stringify(scope.row));
        //   }else{
        //     sessionStorage.setItem('materialItem',JSON.stringify(scope.row));
        //   }
        //   if(materialType){
        //     sessionStorage.removeItem('materialType');
        //     sessionStorage.setItem('materialType','20,40');
        //   }else{
        //     sessionStorage.setItem('materialType','20,40');
        //   }
        //   this.$router.push({name: "MaterialDO", params: {id: scope.row.id}})
        // },
        handleFilter() {
          this.listQuery.page = 1;
          this.getList();
        },
        resetFilter() {
          this.activeName = "";
          this.listQuery = {
            type: 1,
            page: 1,
            page_size: 20,
          };
          this.getList();
        },
        handleCreate() {
          this.material = Object.assign({}, defaultmaterial);
          this.dialogType = "new";
          this.dialogVisible = true;
          this.$nextTick(() => {
            this.$refs["Form"].clearValidate();
          });
        },
        handleDelete(scope) {
          let that = this;
          this.$confirm("确认删除?", "警告", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "error",
          })
            .then(async () => {
              await deleteMaterial(scope.row.id);
              that.getList();
              that.$message.success("成功");
            })
            .catch((err) => {
              that.$message.error(err);
            });
        },
        async confirm(form) {
          let that = this;
          that.$refs[form].validate((valid) => {
            if (valid) {
              const isEdit = this.dialogType === "edit";
              if (isEdit) {
                updateMaterial(this.material.id, this.material).then((res) => {
                  if (res.code >= 200) {
                    that.getList();
                    that.dialogVisible = false;
                    that.$message.success("成功");
                  }
                });
              } else {
                createMaterial(this.material).then((res) => {
                  if (res.code >= 200) {
                    that.getList();
                    that.dialogVisible = false;
                    that.$message.success("成功");
                  }
                });
              }
            } else {
              return false;
            }
          });
        },
      },
    }
  </script>
  
  <style scoped>
  
  </style>
  