<template>
  <div class="app-container">
   
    <el-card>
      <el-row :gutter="24">
        <el-col :span="6" >
          <el-card >
            <div slot="header" class="clearfix">
          <span style="font-size: 16px;
          font-weight: 700;
          ">过程记录表</span>
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="handleCreate"
            >新增</el-button>
            <el-table
              :data="recordformList.results"
              border
              fit
              stripe
              highlight-current-row
              height="100"
              v-el-height-adaptive-table="{bottomOffset: 50}"
              @current-change="handleCurrentChange"
            >
              <el-table-column type="index" width="50" />
              <el-table-column label="表名称">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-link
                    v-if="checkPermission(['material_update'])"
                    @click="handleLook(scope)"
                  >查看</el-link>
                  <el-link
                    v-if="checkPermission(['material_update'])"
                    @click="handleEdit(scope)"
                  >编辑</el-link>
                  <el-link
                    v-if="checkPermission(['material_delete'])"
                    type="danger"
                    @click="handleDelete(scope)"
                  >删除</el-link>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog
              :visible.sync="dialogVisible"
              :title="dialogType === 'edit' ? '编辑记录表格' : '新增记录表格'"
            >
              <el-form
                ref="Forms"
                :model="recordform"
                label-width="80px"
                label-position="right"
              >

                <el-form-item label="表格名称" prop="name">
                  <el-input v-model="recordform.name" 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="recordformconfirm('Forms')">确认</el-button>
              </div>
            </el-dialog>
            <el-dialog
              :model="tableForm"
              :visible.sync="dialogVisibleForm"
              :title="tableForm.name">
              <el-form
                label-width="80px"
                label-position="right"
              >
                <el-row  v-for="(item,$index) in fieldList.results" :key="$index">
                  <el-form-item v-if="item.field_type==='string'" :label="item.field_name" >
                    <el-input  placeholder="请输入" v-model="item.sort"/>
                  </el-form-item>
                  <el-form-item v-else-if="item.field_type==='int'" :label="item.field_name">
                    <el-input type="number"  placeholder="请输入" v-model="item.sort"/>
                  </el-form-item>
                  <el-form-item v-else-if="item.field_type==='float'" :label="item.field_name">
                    <el-input type="number"  placeholder="请输入" v-model="item.sort"/>
                  </el-form-item>
                  <el-form-item v-else-if="item.field_type==='date'" :label="item.field_name">
                    <el-date-picker
                      v-model="item.create_time"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      style="width:100%"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-else-if="item.field_type==='datetime'" :label="item.field_name">
                    <el-date-picker
                      v-model="item.create_time"
                      type="datetime"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width:100%"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-else-if="item.field_type==='select'" :label="item.field_name">
                    <el-select  style="width: 100%"  v-model="item.sort" placeholder="请选择">
                      <el-option
                        v-for="item1 in item.field_choice"
                        :key="item1"
                        :label="item1"
                        :value="item1">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-else-if="item.field_type==='selects'" :label="item.field_name">
                    <el-select  style="width: 100%" v-model="optio" multiple  placeholder="请选择">
                      <el-option
                        v-for="item1 in item.field_choice"
                        :key="item1"
                        :label="item1"
                        :value="item1">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
              </el-form>
              <!--<div style="text-align: right">-->
                <!--<el-button type="danger">取消</el-button>-->
                <!--<el-button type="primary">确认</el-button>-->
              <!--</div>-->
            </el-dialog>
          </el-card>
        </el-col>
        <el-col :span="18" >
          <el-card >
            <div slot="header" class="clearfix">
          <span style="font-size: 16px;
          font-weight: 700;
          ">记录字段</span>
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="handlefieldCreate"
            >新增</el-button>
            <el-table

              :data="fieldList.results"
              border
              fit
              stripe
              highlight-current-row
              height="100"
              v-el-height-adaptive-table="{bottomOffset: 50}"

            >
             <el-table-column type="index" width="50" />
              <el-table-column label="字段名称">
                <template slot-scope="scope">{{ scope.row.field_name }}</template>
              </el-table-column>
             
              <el-table-column label="字段类型">
                <template slot-scope="scope">{{ options_[scope.row.field_type] }}</template>
              </el-table-column>

            

              <el-table-column label="字段标识">
                <template slot-scope="scope">{{ scope.row.field_key }}</template>
              </el-table-column>
                <el-table-column label="上限值">
                <template slot-scope="scope">{{ scope.row.high_limit }}</template>
              </el-table-column>
                 <el-table-column label="上限规则">
                <template slot-scope="scope">{{ highoptionss_[scope.row.high_rule] }}</template>
              </el-table-column>
                <el-table-column label="下限值">
                <template slot-scope="scope">{{ scope.row.low_limit }}</template>
              </el-table-column>
               <el-table-column label="下限规则">
                <template slot-scope="scope"> {{ lowoptionss_[scope.row.low_rule] }}</template>
              </el-table-column>
            <el-table-column label="是否判定">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.need_judge==true">是</el-tag>
                     <el-tag v-else>是</el-tag>
                  </template>
              </el-table-column>
            


              <el-table-column
                align="center"
                label="操作"

              >
                <template slot-scope="scope">

                  <el-link
                    v-if="checkPermission(['material_update'])"
                    @click="handlefieldEdit(scope)"
                  >编辑</el-link
                  >
                  <el-link
                    v-if="checkPermission(['material_delete'])"
                    type="danger"
                    @click="handlefieldDelete(scope)"
                  >删除</el-link
                  >
                </template>
              </el-table-column>

            </el-table>
            <el-dialog :visible.sync="dialogVisible1" :title="dialogType1 === 'edit' ? '编辑表格字段' : '新增表格字段'">
              <el-form ref="Form" :model="field" label-width="100px" label-position="right">
                <el-form-item label="字段类型" prop="field_type">
                  <el-select  style="width: 100%"  v-model="field.field_type" placeholder="请选择">
                    <el-option
                      v-for="item in fieldtypeoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="字段标识" prop="field_key">
                  <el-input v-model="field.field_key" placeholder="字段标识" onkeyup="value=value.replace(/[^A-Za-z_\/]/ig,'')"/>
                </el-form-item>
                <el-form-item label="字段名称" prop="field_name">
                  <el-input v-model="field.field_name" placeholder="字段名称" />
                </el-form-item>
                <el-form-item label="选项" v-show="field.field_type=='radio'||field.field_type=='checkbox'||field.field_type=='select'||field.field_type=='selects'">
                  <el-button @click.prevent="addDomain" style="border: none;">
                    <i class="el-icon-circle-plus-outline"></i>
                    <span style="font-size:14px;">添加</span>
                  </el-button>
                  <el-row v-for="(domain, $index) in field_choice" :key=domain+$index style="margin-bottom: 10px">
                    <el-col :span="20">
                      <el-input v-model="field_choice[$index]"  auto-complete="off"></el-input>
                    </el-col>
                    <el-col :span="3" style="text-align: center" v-if="$index!==0">
                      <i class="el-icon-remove-outline" @click.prevent="removeDomain($index,'1')" style="color: red;font-size: 16px;"></i>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="是否需要判定" prop="need_judge">
                   <el-switch v-model="field.need_judge"></el-switch>
                </el-form-item>
                 
                  <el-form-item label="上限值" prop="high_limit">
                   <el-input-number v-model="field.high_limit"  :precision="2" :min="0"></el-input-number>
                </el-form-item>
                 <el-form-item label="上限规则" prop="high_rule">
                <el-select  style="width: 100%"  v-model="field.high_rule" placeholder="请选择">
                    <el-option
                      v-for="item in highoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                   </el-form-item>
                  <el-form-item label="下限值" prop="low_limit">
                    <el-input-number v-model="field.low_limit" :precision="2" :min="0"></el-input-number>
                </el-form-item>
                  <el-form-item label="下限规则" prop="low_rule">
                <el-select  style="width: 100%"  v-model="field.low_rule" placeholder="请选择">
                    <el-option
                      v-for="item in lowoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                   </el-form-item>
                <el-form-item label="排序" prop="sort">
                  <el-input-number v-model="field.sort"  :min="1" placeholder="排序"></el-input-number>
                </el-form-item>
              </el-form>
              <div style="text-align: right">
                <el-button type="danger" @click="dialogVisible1 = false">取消</el-button>
                <el-button type="primary" @click="fieldconfirm('Form')">确认</el-button>
              </div>
            </el-dialog>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
 
  import checkPermission from "@/utils/permission";
  import { getEquipmentAll } from "@/api/equipment";
  import { upUrl, upHeaders } from "@/api/file";
  import {getrecordformList,createrecordform,updaterecordform,deleterecordform,getrffieldList,createrffield,updaterffield,
    deleterffield} from "@/api/mtm";
  import vueJsonEditor from 'vue-json-editor'
  import { genTree } from "@/utils";
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  const defaultstep = {
    name: "",
    number: "",
  };

  const defaultrecordform = {

  };
  const defaultfield = {
  
  };
  export default {
    components: { Pagination,vueJsonEditor },
    data() {
      return {
        step: defaultstep,
        stepList:[],
        upHeaders: upHeaders(),
        upUrl: upUrl(),
        fileList:[],
        listLoading: true,
        need_judge:false,
        dialogVisibles: false,
        dialogVisibleForm: false,
        dialogTypes: "new",
        field: {
          field_type:'',
          field_key:'',
          field_name:'',
          sort:'',
          field_choice:[""],
        },
        field_choice:[''],
        options:[],
        optio:[],
        rule1: {
          name: [{ required: true, message: "请输入", trigger: "blur" }],
          number: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        recordform: defaultrecordform,
        dialogType: "new",
        dialogVisible:false,
        dialogType1: "new",
        dialogVisible1:false,
        tableForm:{
          name:'',
        },
        listQueryrecordform: {
          page: 1,
          page_size: 20,
        },
        recordformList: {
          count: 0,
        },
        fieldList: {
          count: 0,
        },
        listQueryfield: {
          page: 1,
          page_size: 20,
        },
        highoptions:[{ value: 1,
          label: '<'},{ value: 2,
          label: '<='}],
        lowoptions:[{ value: 1,
          label: '>'},{ value: 2,
          label: '>='}],
         highoptionss_:{ 
           1: '<',
            2: '<='
            },
        lowoptionss_:{
          1: '>',
          2: '>='
          },
        options_: {
          'string':'文本',
          'int':'整数',
          'float':'小数',
          'date': '日期',
          'datetime': '日期时间',
          'select': '单选',
          'selects': '多选',
        },
        fieldtypeoptions: [{
          value: 'string',
          label: '文本'
        },
          {
            value: 'int',
            label: '整数'
          },
          {
            value: 'float',
            label: '小数'
          },
          {
            value: 'date',
            label: '日期'
          },
          {
            value: 'time',
            label: '时间'
          },
          {
            value: 'datetime',
            label: '日期时间'
          },
          {
            value: 'select',
            label: '单选'
          },
          {
            value: 'selects',
            label: '多选'
          }
        ],
        typeoptions: [{
          value: 1,
          label: '生产记录'
        }],
      };
    },
    computed: {},
    watch: {},
    created() {
      this.step.process = this.$route.params.id;
    this.recordformLists();

    },
    methods: {
      //添加字段选项
      addDomain() {
        this.field_choice.push('')
      },
      //删除字段选项
      removeDomain(index){
        this.field_choice.splice(index, 1)
      },
      handleLook(scope){
        debugger;
        console.log(scope);
        this.dialogVisibleForm = true;
        this.tableForm = Object.assign({}, scope.row); // copy obj
        this.formID=this.tableForm.id;
        this.fieldLists();
      },
      checkPermission,
     
     

      handleCurrentChange(row){
        this.formID=row.id;
        this.fieldLists();

      },
      recordformLists()
      {
        this.listQueryrecordform.step=this.stepid;
         this.listQueryrecordform.type=2;
        getrecordformList(this.listQueryrecordform).then((response) => {
          if (response.data) {
            this.recordformList = response.data;
          }

        });
      },
      fieldLists()
      {
        this.listQueryfield.form=this.formID
        getrffieldList(this.listQueryfield).then((response) => {
          if (response.data) {
            this.fieldList = response.data;
            debugger;
            console.log(this.fieldList)
          }

        });
      },
      //新增记录表
      handleCreate() {
        this.recordform = Object.assign({}, defaultrecordform);
        this.dialogType = "new";
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs["Forms"].clearValidate();
        });
      },
      //新增字段
      handlefieldCreate() {

        this.field_choice = [''];
        this.field = Object.assign({}, defaultfield);
        this.dialogType1 = "new";
        this.dialogVisible1 = true;
        this.$nextTick(() => {
          this.$refs["Form"].clearValidate();
        });
      },
      handleEdit(scope) {
        this.recordform = Object.assign({}, scope.row); // copy obj
        this.dialogType = "edit";
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs["Forms"].clearValidate();
        });
      },
      handlefieldEdit(scope) {
        this.field = Object.assign({}, scope.row); // copy obj
        this.field_choice = this.field.field_choice;
        this.dialogType1 = "edit";
        this.dialogVisible1 = true;
        this.$nextTick(() => {
          this.$refs["Form"].clearValidate();
        });
      },
      handleDelete(scope) {
        this.$confirm("确认删除?", "警告", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "error",
        })
          .then(async () => {
            await deleterecordform(scope.row.id);
            this.recordformLists()
            this.$message.success("成功");
          })
          .catch((err) => {
            console.error(err);
          });
      },
      handlefieldDelete(scope) {
        this.$confirm("确认删除?", "警告", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "error",
        })
          .then(async () => {
            await deleterffield(scope.row.id);
            this.fieldLists()
            this.$message.success("成功");
          })
          .catch((err) => {
            console.error(err);
          });
      },
      async recordformconfirm(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            const isEdit = this.dialogType === "edit";
            if (isEdit) {
              this.recordform.step=this.stepid;
               this.recordform.type=2;
              updaterecordform(this.recordform.id, this.recordform).then((res) => {
                if (res.code >= 200) {
                  this.recordformLists()
                  this.dialogVisible = false;
                  this.$message.success("成功");
                }
              });
            } else {
              this.recordform.step=this.stepid
              this.recordform.type=2;
              createrecordform(this.recordform).then((res) => {
                if (res.code >= 200) {
                  this.recordformLists()
                  this.dialogVisible = false;
                  this.$message.success("成功");
                }
              });
            }
          } else {
            return false;
          }
        });
      },
      async fieldconfirm(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            const isEdit = this.dialogType1 === "edit";
            if (isEdit) {
              this.field.form=this.formID;
              this.field.field_choice = this.field_choice;
              updaterffield(this.field.id, this.field).then((res) => {
                if (res.code >= 200) {
                  this.fieldLists()
                  this.dialogVisible1 = false;
                  this.$message.success("成功");
                }
              });
            } else {
              this.field.form=this.formID;
              this.field.field_choice = this.field_choice;
              createrffield(this.field).then((res) => {
                if (res.code >= 200) {
                  this.fieldLists()
                  this.dialogVisible1 = false;
                  this.$message.success("成功");
                }
              });
            }
          } else {
            return false;
          }
        });
      },
    },
  };
</script>
<style>
  .my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }
</style>
