<template>
  <div class="app-container">
    <el-card>

      <el-descriptions title="子工序详情" :column="2" border>
        <el-descriptions-item label="工序名称"  label-class-name="my-label" content-class-name="my-content">{{stepDO.name}}</el-descriptions-item>
        <el-descriptions-item label="步骤编号" label-class-name="my-label" content-class-name="my-content">{{stepDO.number}}</el-descriptions-item>
        <el-descriptions-item label="相关设备" label-class-name="my-label" :contentStyle="{'text-align': 'left'}">
          <el-tag v-for="item in stepDO.equipments_"
                  :key="item.number"
                  :label="item.name"
                  :value="item.number">{{item.name}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="指导书内容" label-class-name="my-label" :contentStyle="{'text-align': 'left'}">{{step.instruction_content}}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card>

      <el-tabs type="border-card">
        <el-tab-pane label="过程记录">

          <el-row :gutter="24">
            <el-col :span="6" >
              <el-card style="margin-top: 2px">
                <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="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-item label="表格类型" prop="type">
                      <el-select  style="width: 100%" v-model="recordform.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>
                  <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-card>

            </el-col>
            <el-col :span="18" >
              <el-card class="box-card">
                <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">{{ options_[scope.row.field_type] }}</template>
                  </el-table-column>

                  <el-table-column label="字段名称">
                    <template slot-scope="scope">{{ scope.row.field_name }}</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.boolean_field_display }}</template>
                  </el-table-column>
                  <el-table-column label="选项显示名">
                    <template slot-scope="scope">{{ scope.row.field_choice }}</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="80px"
                    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="字段标识" />
                    </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="布尔类型显示名" prop="boolean_field_display">
                      <vue-json-editor
                        v-model="field.boolean_field_display"
                        :showBtns="false"
                        :mode="'code'"
                        lang="zh"

                      />
                    </el-form-item>
                    <el-form-item label="选项" prop="field_choice">

                      <vue-json-editor
                        v-model="field.field_choice"
                        :showBtns="false"
                        :mode="'code'"
                        lang="zh"

                      />
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                      <el-input v-model="field.sort" placeholder="排序" />
                    </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-tab-pane>
      </el-tabs>

    </el-card>

  </div>
</template>
<script>
  import { getStep,getrecordformList,createrecordform,updaterecordform,deleterecordform,getrffieldList,createrffield,updaterffield,
    deleterffield} from "@/api/mtm";

  import vueJsonEditor from 'vue-json-editor'
  import checkPermission from "@/utils/permission";
  const defaultrecordform = {

  };
  const defaultfield = {

  };
  export default {
    components: { vueJsonEditor },
    name: "stepdo",

    props: ["stepid"],
    data() {
      return {
        stepDO:"",
        recordform: defaultrecordform,
        field: defaultfield,
        dialogType: "new",
        dialogVisible:false,
        dialogType1: "new",
        dialogVisible1:false,
        listQueryrecordform: {
          page: 1,
          page_size: 20,
        },
        recordformList: {
          count: 0,
        },
        fieldList: {
          count: 0,
        },
        listQueryfield: {
          page: 1,
          page_size: 20,
        },
        options_: {
          'string':'字符串',
          'int':'整型',
          'float': '浮点',
          'boolean':'布尔',
          'date': '日期',
          'datetime': '日期时间',
          'radio': '单选',
          'checkbox': '多选',
          'select': '单选下拉',
          'selects': '多选下拉',
          'textarea': '文本域'
        },
        fieldtypeoptions: [{
          value: 'string',
          label: '字符串'
        },
          {
            value: 'int',
            label: '整型'
          },
          {
            value: 'float',
            label: '浮点'
          },
          {
            value: 'boolean',
            label: '布尔'
          },
          {
            value: 'date',
            label: '日期'
          },
          {
            value: 'datetime',
            label: '日期时间'
          },
          {
            value: 'radio',
            label: '单选'
          },
          {
            value: 'checkbox',
            label: '多选'
          },
          {
            value: 'select',
            label: '单选下拉'
          },
          {
            value: 'selects',
            label: '多选下拉'
          },
          {
            value: 'textarea',
            label: '文本域'
          }],
        typeoptions: [{
          value: 1,
          label: '生产记录'
        }],
      };
    },
    computed: {},
    watch: {

    },
    created() {

      this.getStepD();
      this.recordformLists();

    },
    methods: {
      checkPermission,
      getStepD()
      {

        getStep(this.stepid).then((response) => {
          if (response.data) {
            this.stepDO = response.data;
          }

        });
      },

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

      },
      recordformLists()
      {
        this.listQueryrecordform.step=this.stepid;
        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;
          }

        });
      },
      handleCreate() {
        this.recordform = Object.assign({}, defaultrecordform);
        this.dialogType = "new";
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs["Forms"].clearValidate();
        });
      },
      handlefieldCreate() {
        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.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

              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

              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

              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

              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>
