<template>
  <basic-container>
    <avue-tabs :option="option"
               @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">
        </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="headerClass"
                     v-model="inbound_form"
                     ref="inbound_crud">
          </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="headerClass"
                   v-model="outbound_form"
                   ref="outbound_crud2">
          </avue-crud>
      </span>
    <div class="container">
       <span >
          <el-button type="primary"
                     size="large"
                     @click="handleFormSubmit"
                     v-if="addUpdateShowButton">
                     确定</el-button>
       </span>
    </div>
  </basic-container>
</template>

<script>
  import {getDetail} from "@/api/spares/material";
  import {inbound_getListByMaterialNo} from "@/api/spares/inbound";
  import {outbound_getListByMaterialNo} from "@/api/spares/outbound";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        readonlyForm:{},
        addUpdateShowButton:{},
        frame_class: '',
        tab1_form: {},
        tab1_option: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: "物资编号",
              prop: "materialNo",
              span: 6,
              rules: [{
                required: true,
                message: "请输入物资编号",
                trigger: "blur"
              }]
            },
            {
              label: "场站",
              prop: "station",
              span: 6,
              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: 6,
              rules: [{
                required: true,
                message: "请输入物资名称",
                trigger: "blur"
              }]
            },
            {
              label: "物资分类码",
              prop: "materialClassCode",
              span: 6,
              rules: [{
                required: true,
                message: "请输入物资分类码",
                trigger: "blur"
              }]
            },
            {
              label: "规格型号",
              prop: "model",
              span: 6,
              rules: [{
                required: true,
                message: "请输入规格型号",
                trigger: "blur"
              }]
            },
            {
              label: "制造商名称",
              prop: "manufacturerName",
              span: 6
            },
            {
              label: "供应商名称",
              prop: "sipplierName",
              span: 6
            },
            {
              label: "所属仓库",
              prop: "warehouse",
              span: 6
            },
            {
              label: "库存数量",
              prop: "inventoryCount",
              span: 6,
              rules: [{
                required: true,
                message: "请输入库存数量",
                trigger: "blur"
              }]
            },
            {
              label: "物资描述",
              prop: "materialDescription",
              span: 6,
              rules: [{
                required: true,
                message: "请输入物资描述",
                trigger: "blur"
              }]
            }
          ]
        },
        inbound_form: {},
        option_inbound: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: "物资编号",
              prop: "materialNo"
            },
            {
              label: "入库编号",
              prop: "inboundNo"
            },
            {
              label: "入库时间",
              prop: "inboundTime",
              format: 'yyyy/MM/dd'
            },
            {
              label: "入库申领人",
              prop: "inboundClaimants"
            },
            {
              label: "入库经办人",
              prop: "inboundManager"
            },
            {
              label: "入库数量",
              prop: "inboundCount"
            },
            {
              label: "入库审核状态",
              prop: "istatus",
              dicUrl: "/api/daf-system/dict/dictionary?code=check_status",
              props: {
                label: "dictValue",
                value: "dictKey"
              }
            }
          ]
        },
        outbound_form: {},
        option_outbound: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: "物资编号",
              prop: "materialNo"
            },
            {
              label: "出库编号",
              prop: "outboundNo"
            },
            {
              label: "出库时间",
              prop: "outboundTime",
              format: 'yyyy/MM/dd'
            },
            {
              label: "入库申领人",
              prop: "inboundClaimants"
            },
            {
              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"
              }
            }
          ]
        },
        data: [],
        inbound_data: [],
        outbound_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"){
        this.option.column.push({ label: '入库详情', prop: 'inbound' },{ label: '出库详情', prop: 'outbound' });
        this.readonlyForm=true;
        this.addUpdateShowButton=false;
        this.frame_class = 'frame_class';
        this.SearchDetail();
      }else{
        this.readonlyForm=false;
        this.addUpdateShowButton=true;
        this.frame_class = null;
      }
    },
    methods: {
      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;
        });
      },
      inbound_onLoad() {
        this.loading = true;
        inbound_getListByMaterialNo(this.$route.query.id).then(res => {
          this.inbound_data = res.data.data;
          this.loading = false;
        });
      },
      outbound_onLoad() {
        this.loading = true;
        outbound_getListByMaterialNo(this.$route.query.id).then(res => {
          this.inbound_data = res.data.data;
          this.loading = false;
        });
      },
      headerClass(){
        return 'head-style'
      }
    }
  };
</script>

<style>
.head-style{
  background-color: #1e9fff !important;
  color: #FFFFFF !important;
}
.frame_class input.el-input__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; /* 默认隐藏 */
}
</style>
