<template>
  <basic-container>
    <avue-tabs :option="option"
               ref="tabs"
               @change="handleChange"></avue-tabs>
    <span v-if="type.prop==='information'">
        <avue-form :option="tab1_option"
                   v-model="tab1_form"
                   ref="tab1_form"
                   :class="frame_class">
          <template #materialClassCode="{}">
            <el-select v-model="tab1_form.materialClassCode">
               <el-option
                 v-for="item in optionsExt"
                 :key="item"
                 :label="item"
                 :value="item">
               </el-option>
              <el-option key="" value="" :disabled="true"><span>找不到物资分类码?</span><el-link type="primary" @click="test">点击新增</el-link></el-option>
            </el-select>
          </template>
        </avue-form>
      </span>
    <span v-else-if="type.prop==='inbound'">
        <div>
          <avue-crud :data="inbound_data"
                     :table-loading="loading"
                     :option="option_inbound"
                     :permission="permissionList"
                     header-cell-class-name="header-class"
                     v-model="inbound_form"
                     ref="inbound_crud">
            <template #menu="{row,index,size}">
              <el-button size="small" type="text" v-if="permission.material_auditing" @click="auditing_in(row)">审核</el-button>
              <el-button size="small" type="text" v-if="permission.material_reject" @click="reject_in(row)">驳回</el-button>
            </template>
          </avue-crud>
        </div>
      </span>
    <span v-else-if="type.prop==='outbound'">
        <avue-crud :option="option_outbound"
                   :table-loading="loading"
                   :data="outbound_data"
                   :permission="permissionList"
                   header-cell-class-name="header-class"
                   v-model="outbound_form"
                   ref="outbound_crud2">
            <template #menu="{row,index,size}">
              <el-button size="small" type="text" v-if="permission.material_auditing" @click="auditing_out(row)">审核</el-button>
              <el-button size="small" type="text" v-if="permission.material_reject" @click="reject_out(row)">驳回</el-button>
            </template>
          </avue-crud>
      </span>
    <div class="container">
       <span>
          <el-button type="primary"
                     size="large"
                     @click="handleFormSubmit"
                     v-if="addUpdateShowButton && permission.material_add">
                     确定</el-button>
       </span>
    </div>
    <el-dialog title="物资分类码"
               append-to-body
               :visible.sync="dialogVisible"
               width="480px">
      <avue-form :option="optionDia"
                 v-model="diaForm"
                 ref="diaForm">
      </avue-form>
      <span slot="footer">
            <el-button type="default" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"
                       v-if="permission.materialclasscode_add"
                       @click="submitDia">确 定</el-button>
          </span>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {add, getDetail, getDetailByMaterialNo} from "@/api/spares/material";
  import {inbound_getListByMaterialNo, update_materialDetailIn} from "@/api/spares/inbound";
  import {outbound_getListByMaterialNo, update_materialDetailOut} from "@/api/spares/outbound";
  import {mapGetters} from "vuex";
  import request from "@/router/axios";
  import {getCodeList, codeAdd} from "@/api/spares/materialclassification";

  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        type: {},
        dialogVisible: false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        readonlyForm:{},
        addUpdateShowButton:{},
        frame_class: '',
        option: {
          column: [{
            label: '基本信息',
            prop: 'information',
          }
          ]
        },
        tab1_form: {},
        tab1_option: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: "物资编号",
              prop: "materialNo",
              span: 8,
              disabled: true,
            },
            {
              label: "场站",
              prop: "station",
              span: 8,
              type: "select",
              dicUrl: "/api/daf-system/dict/dictionary?code=station",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              rules: [{
                required: true,
                message: "请输入场站",
                trigger: "blur"
              }]
            },
            {
              label: "物资名称",
              prop: "materialName",
              span: 8,
              rules: [{
                required: true,
                message: "请输入物资名称",
                trigger: "blur"
              }]
            },
            {
              label: "物资分类码",
              prop: "materialClassCode",
              span: 8,
            },
            // {
            //   label: "物资分类码",
            //   prop: "materialClassCode",
              // span: 7,
              // type: "select",
              // dicUrl: "/api/spares/materialclasscode/getMaterialClassCodeList",
              // props: {
              //   label: "materialClassCode",
              //   value: "materialClassCode"
              // },
              // rules: [{
              //   required: true,
              //   message: "请输入物资分类码",
              //   trigger: "blur"
              // }]
            // },

            // {
            //   label: "",
            //   labelWidth:20,
            //   span: 1,
            //   event: {
            //     click: () => {
            //       this.dialogVisible = true
            //     },
            //   },
            // },
            {
              label: "规格型号",
              prop: "model",
              span: 8,
              rules: [{
                required: true,
                message: "请输入规格型号",
                trigger: "blur"
              }]
            },
            {
              label: "库存数量",
              prop: "inventoryCount",
              span: 8,
              rules: [{
                required: true,
                message: "请输入库存数量",
                trigger: "blur"
              }]
            },
            {
              label: "制造商统一社会信用代码",
              prop: "creditCodeM",
              display: true,
              span: 8,
              type: "select",
              dicUrl: "/api/manufacturerinfo/getNoList",
              props: {
                label: "creditCode",
                value: "creditCode",
              },
              event: {
                change: (val) => {
                  if (!val) return
                  if (val) {
                    request({
                      url: '/api/manufacturerinfo/getDetail',
                      method: 'get',
                      params: {
                        creditCode: val
                      }
                    }).then((res) => {
                      this.tab1_form.manufacturerName = res.data.data.manufacturerName;
                    })
                  }
                },
              }
            },
            {
              label: "制造商名称",
              prop: "manufacturerName",
              disabled: true,
              span: 8
            },
            {
              label: "所属仓库",
              prop: "warehouse",
              type: "select",
              dicUrl: "/api/warehouse/getWarehouseList",
              props: {
                label: "name",
                value: "code",
              },
              span: 8,
              rules: [{
                required: true,
                message: "请输入所属仓库",
                trigger: "blur"
              }]
            },
            {
              label: "供应商统一社会信用代码",
              prop: "creditCodeS",
              display: true,
              span: 8,
              type: "select",
              dicUrl: "/api/supplierinfo/getNoList",
              props: {
                label: "creditCode",
                value: "creditCode",
              },
              event: {
                change: (val) => {
                  if (!val) return
                  if (val) {
                    request({
                      url: '/api/supplierinfo/getDetail',
                      method: 'get',
                      params: {
                        creditCode: val
                      }
                    }).then((res) => {
                      this.tab1_form.supplierName = res.data.data.supplierName;
                    })
                  }
                },
              }
            },
            {
              label: "供应商名称",
              prop: "supplierName",
              disabled: true,
              span: 8
            },
            {
              label: "物资描述",
              prop: "materialDescription",
              span: 8,
              rules: [{
                required: true,
                message: "请输入物资描述",
                trigger: "blur"
              }]
            }
          ]
        },
        optionsExt:[],
        inbound_data: [],
        inbound_form: {},
        option_inbound: {
          align: 'center',
          menuAlign: 'center',
          height: 'auto',
          calcHeight: 210,
          searchShow: true,
          searchMenuSpan: 6,
          tip: false,
          border: true,
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: "物资编号",
              prop: "materialNo"
            },
            {
              label: "入库编号",
              prop: "inboundNo"
            },
            {
              label: "入库时间",
              prop: "inboundTime",
              type: "date",
              format: 'yyyy/MM/dd'
            },
            {
              label: "入库申领人",
              prop: "inboundClaimants"
            },
            {
              label: "入库经办人",
              prop: "inboundManager"
            },
            {
              label: "入库数量",
              prop: "inboundCount"
            },
            {
              label: "入库审核状态",
              prop: "istatus",
              type: "select",
              dicUrl: "/api/daf-system/dict/dictionary?code=check_status",
              props: {
                label: "dictValue",
                value: "dictKey"
              }
            }
          ]
        },
        outbound_data: [],
        outbound_form: {},
        option_outbound: {
          align: 'center',
          menuAlign: 'center',
          height: 'auto',
          calcHeight: 210,
          searchShow: true,
          searchMenuSpan: 6,
          tip: false,
          border: true,
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: "物资编号",
              prop: "materialNo"
            },
            {
              label: "出库编号",
              prop: "outboundNo"
            },
            {
              label: "出库时间",
              prop: "outboundTime",
              type: "date",
              format: 'yyyy/MM/dd'
            },
            {
              label: "出库申领人",
              prop: "outboundClaimants"
            },
            {
              label: "出库经办人",
              prop: "outboundManager"
            },
            {
              label: "出库数量",
              prop: "outboundCount"
            },
            {
              label: "出库审核状态",
              prop: "istatus",
              type: "select",
              dicUrl: "/api/daf-system/dict/dictionary?code=check_status",
              props: {
                label: "dictValue",
                value: "dictKey"
              }
            }
          ]
        },
        diaForm: {},
        optionDia: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: "物资分类码",
              prop: "code",
              span:22,
              labelWidth: 150
            },
            {
              label: "物资类型",
              prop: "type",
              span:22,
              labelWidth: 150
            }
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
          // this.option.column = this.option.column.filter(v => {
          //     return this.permission['material_col_' + v.prop]
          // })
        return {
          addBtn: false,
          viewBtn: false,
          delBtn: false,
          editBtn: false
        };
      },
    },
    created () {
      this.type = this.option.column[0];
      if(this.$route.query.frameMode == "view"){
        const creditCodeM = this.findObject(this.tab1_option.column, "creditCodeM");
        creditCodeM.display = false;
        const creditCodeS = this.findObject(this.tab1_option.column, "creditCodeS");
        creditCodeS.display = false;
        this.option.column.push({ label: '入库详情', prop: 'inbound' },{ label: '出库详情', prop: 'outbound' });
        this.readonlyForm=true;
        this.addUpdateShowButton=false;
        this.frame_class = 'frame_class';
        this.SearchDetail();
      }else if(this.$route.query.frameMode == "search"){
        const creditCodeM = this.findObject(this.tab1_option.column, "creditCodeM");
        creditCodeM.display = false;
        const creditCodeS = this.findObject(this.tab1_option.column, "creditCodeS");
        creditCodeS.display = false;
        this.option.column.push({ label: '入库详情', prop: 'inbound' },{ label: '出库详情', prop: 'outbound' });
        if (this.$route.query.mode == "in")
        {
          this.$nextTick(() => {
            this.$refs.tabs.changeTabs(1)
          })
        }
        else
        {
          this.$nextTick(() => {
            this.$refs.tabs.changeTabs(2)
          })
        }
        this.readonlyForm=true;
        this.addUpdateShowButton=false;
        this.frame_class = 'frame_class';
        this.SearchDetailByMaterialNo();
      } else {
        const materialNo = this.findObject(this.tab1_option.column, "materialNo");
        materialNo.value = ' ';
        materialNo.disabled = true;
        this.readonlyForm=false;
        this.addUpdateShowButton=true;
        this.frame_class = null;
        this.SearchClassCode();
      }
    },
    methods: {
      test(val) {
        this.dialogVisible = true;
        this.$refs.diaForm.resetForm();
      },
      handleFormSubmit() {
        this.$refs.tab1_form.validate((valid, done, msg) => {
          if (valid) {
            done()
            this.Submit();
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      // 处理表单提交
      Submit() {
        this.$confirm("是否新增所填数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.tab1_form.checkStatus="1"
          add(this.tab1_form).then(()=>{
            this.$router.push({
              path: "/spares/material",
              query: {
              },
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }).catch((error) => {
            this.$message({
              type: "error",
              message: "操作失败!"
            });
          });
        });
      },
      handleChange (column) {
        this.type = column
        if (column.prop == 'inbound') {
          this.inbound_onLoad();
        }if (column.prop == 'outbound') {
          this.outbound_onLoad();
        }
      },
      SearchDetail() {
        getDetail(this.$route.query.id).then(res => {
          console.log(res);
          this.tab1_form = res.data.data;
        });
      },
      SearchDetailByMaterialNo() {
        getDetailByMaterialNo(this.$route.query.materialNo).then(res => {
          this.tab1_form = res.data.data;
        });
      },
      SearchClassCode() {
        getCodeList().then(res => {
          this.optionsExt = res.data.data;
        });
      },
      inbound_onLoad() {
        this.loading = true;
        inbound_getListByMaterialNo(this.$route.query.materialNo).then(res => {
          this.inbound_data = res.data.data;
          this.loading = false;
        });
      },
      outbound_onLoad() {
        this.loading = true;
        outbound_getListByMaterialNo(this.$route.query.materialNo).then(res => {
          this.outbound_data = res.data.data;
          this.loading = false;
        });
      },
      headerClass(){
        return 'head-style'
      },
      auditing_in(row) {
        if (row.istatus === 2)
        {
          this.$message({
            type: "error",
            message: "数据已经是已审核状态!"
          });
          return;
        }
        this.$confirm("是否将数据审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          row.istatus = 2;
          this.submitRejectOrauditing_in(row);
        });
      },
      reject_in(row) {
        if (row.istatus === 2)
        {
          this.$message({
            type: "error",
            message: "数据已经是已审核状态!"
          });
          return;
        }
        this.$confirm("是否将数据审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          row.istatus = 3;
          this.submitRejectOrauditing_in(row);
        });
      },
      submitRejectOrauditing_in(row) {
        update_materialDetailIn(row).then(() => {
          this.SearchDetail();
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }).catch((error) => {
          this.$message({
            type: "error",
            message: "操作失败!"
          });
        });
      },
      auditing_out(row) {
        if (row.istatus === 2)
        {
          this.$message({
            type: "error",
            message: "数据已经是已审核状态!"
          });
          return;
        }
        if (row.outboundCount > this.tab1_form.inventoryCount)
        {
          this.$message({
            type: "error",
            message: "库存不足!"
          });
          return;
        }
        this.$confirm("是否将数据审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          row.istatus = 2;
          this.submitRejectOrauditing_out(row);
        });
      },
      reject_out(row) {
        if (row.istatus === 2)
        {
          this.$message({
            type: "error",
            message: "数据已经是已审核状态!"
          });
          return;
        }
        this.$confirm("是否将数据审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          row.istatus = 3;
          this.submitRejectOrauditing_out(row);
        });
      },
      submitRejectOrauditing_out(row) {
        update_materialDetailOut(row).then(() => {
          this.SearchDetail();
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }).catch((error) => {
          this.$message({
            type: "error",
            message: "操作失败!"
          });
        });
      },
      submitDia(row, done, loading) {
        this.$refs.diaForm.validate((valid, done, msg) => {
          if (valid) {
            done()
            codeAdd(this.diaForm).then(() => {
              this.$refs.diaForm.resetForm();
              this.dialogVisible = false;
              this.SearchClassCode();
              this.$message({
                type: "success",
                message: "操作成功!"
              });
            }, error => {
              window.console.log(error);
              loading();
            });
          } else {
            this.$message({
              type: "warning",
              message: "请输入必要信息!"
            });
          }
        });
      },
    }
  };
</script>

<style>

.frame_class .el-input__inner,
.frame_class .el-textarea__inner {
  border: none;
  box-shadow: none;
  outline: none;
  pointer-events: none;
}

.frame_class .el-input__icon {
  display: none;
}

.frame_class .el-input--prefix .el-input__inner {
  padding-left: 15px;
}

.frame_class input::placeholder {
  color: transparent;
  display: none; /* 默认隐藏 */
}

.frame_class div.el-select--small {
  border: none;
  box-shadow: none;
  outline: none;
  pointer-events: none;
}

.container {
  display: flex;
  justify-content: flex-end; /* 将子元素推到容器的末端 */
}
</style>