<template>
  <div class="app-container">
    <el-card>
      <el-button
        v-if="checkPermission(['wp_to_order'])"
        type="primary"
        icon="el-icon-plus"
        @click="handleorder"
      >
        选择订单
      </el-button>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="iproductData.results"
        border
        fit
        stripe
        highlight-current-row
        height="100"
        v-el-height-adaptive-table="{bottomOffset: 42}"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="50"/>
        <el-table-column label="成品编号" prop="number">
        </el-table-column>
        <el-table-column label="成品批次" prop="batch">
        </el-table-column>
        <el-table-column label="成品名称" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.material_.name }}</template>
        </el-table-column>
        <el-table-column label="所在仓库">
          <template slot-scope="scope">{{scope.row.warehouse_.name}}</template>
        </el-table-column>
        <el-table-column label="订单">
          <template slot-scope="scope">
            <span v-if="scope.row.to_order_">{{scope.row.to_order_.number}}</span>
            <el-tag v-else-if="scope.row.to_order_ == null && scope.row.need_to_order == true">
              需要确定订单
            </el-tag>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="合同">
          <template slot-scope="scope">
            <span v-if="scope.row.to_order_">{{scope.row.to_order_.contract_.name}}</span>
            <span v-else-if="scope.row.to_order_ == null && scope.row.need_to_order == true">
            </span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="客户">
          <template slot-scope="scope">
            <span v-if="scope.row.to_order_">{{scope.row.to_order_.customer_.name}}</span>
            <span v-else-if="scope.row.to_order_ == null && scope.row.need_to_order == true">
            </span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="军检">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_mtestok == false">不合格</el-tag>
            <el-tag v-else-if="scope.row.is_mtestok == true">合格</el-tag>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="销售状态">
          <template slot-scope="scope">{{state_[scope.row.state]}}</template>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" width="220px">
           <template slot-scope="scope">
             <el-link
               v-if="
                 checkPermission(['warehouse_update']) &&
                 scope.row.act_state == 30
               "
               @click="handleMtest(scope)"
               >军检
             </el-link>
           </template>
         </el-table-column>!-->
      </el-table>
      <pagination
        v-show="iproductData.count > 0"
        :total="iproductData.count"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getList"
      />
      <el-dialog title="军检" :visible.sync="dialogVisible">
        <el-form :model="mtestform" label-width="130px" label-position="right">
          <el-form-item label="是否军检合格" prop="name">
            <el-switch v-model="mtestform.is_mtestok"></el-switch>
          </el-form-item>
          <el-form-item label="军检备注" prop="name">
            <el-input
              v-model="mtestform.remark_mtest"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submtest">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="指定发货订单"
        :close-on-click-modal="false"
        :visible.sync="dialogFormVisibleorder"
      >
        <el-descriptions :column="5" border style="margin-bottom: 20px">
          <el-descriptions-item label="原订单">{{ this.ordershow }}</el-descriptions-item>
          <el-descriptions-item label="原客户">{{ this.customershow }}</el-descriptions-item>
          <el-descriptions-item label="原合同">{{ this.contractshow }}</el-descriptions-item>
        </el-descriptions>
        <el-table
          v-loading="listLoading"
          :data="orderList"
          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="订单编号" width="160" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.number }}</template>
          </el-table-column>
          <el-table-column label="客户" width="200" show-overflow-tooltip>
            <template slot-scope="scope">{{scope.row.customer_.name}}
            </template>
          </el-table-column>
          <el-table-column label="所属合同" width="200" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.contract">{{scope.row.contract_.name}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-link
                v-if="checkPermission(['warehouse_update'])"
                @click="toorders(scope)"
              >
                确认
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleorder = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
  import {getiproductList} from "@/api/inm";
  import checkPermission from "@/utils/permission";
  import {getOrderList} from "@/api/sam";
  import {mtest, toorder} from "@/api/wpm";
  // import {genTree} from "@/utils";
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

  export default {
    components: {Pagination},
    data() {
      return {
        iproductData: {
          count: 0,
        },
        listQuery: {
          page: 1,
          page_size: 20,
        },
        mtest: {},
        salesdetail: "",
        saleproduct: "",
        dialogVisible: false,
        mtestform: {
          is_mtestok: false,
        },
        state_: {
          10: "可出售",
          20: "销售锁定",
          30: "已售出",
        },

        form1: {},
        dialogFormVisibleorder: false,
        orderList: [],
        mutipID1: [],
        mutipID: [],
        mtmId: [],
        ordershow: "",
        customershow: "",
        contractshow: "",
        materialshow: [],
      };
    },
    computed: {},
    watch: {},
    created() {
      this.getList();
    },
    methods: {
      checkPermission,
      //半成品列表
      getList() {
        this.listLoading = true;
        this.listQuery.material__type = 1;
        this.listQuery.is_saled = false;
        getiproductList(this.listQuery).then((response) => {
          if (response.data) {
            this.iproductData = response.data;
          }
          this.listLoading = false;
        });
      },

      handleMtest(scope) {
        this.saleproduct = scope.row.id;
        this.dialogVisible = true;
      },

      submtest() {
        mtest(this.saleproduct, this.mtestform).then((res) => {
          if (res.code >= 200) {
            this.$message.success("提交成功！");
            this.dialogVisible = false;
          }
        });
      },

      //批量选择成品发给谋订单
      handleorder() {
        this.dialogFormVisibleorder = true;
        let _this = this;
        _this.mutipID1 = [];
        _this.mtmId = [];
        _this.materialshow = [];
        this.$refs.multipleTable.selection.forEach((item) => {
          _this.mutipID1.push(item.wproduct);
          _this.mtmId.push(item.material_.id);
          _this.materialshow.push(item);
        });
        this.ordershow = _this.materialshow[0].order_.number;
        this.customershow = _this.materialshow[0].order_.customer_.name;
        this.contractshow = _this.materialshow[0].order_.contract_.name;
        getOrderList({page: 0, material: _this.mtmId[0], tag: 'not_done'}).then(
          (response) => {
            if (response.data) {
              this.orderList = response.data;
            }
            this.listLoading = false;
          }
        );
      },

      //提交批量产品选择的订单
      toorders(scope) {
        toorder({
          order: scope.row.id,
          wproducts: this.mutipID1,
        }).then((res) => {
          if (res.code >= 200) {
            this.$message.success("成功！");
            this.dialogFormVisibleorder = false;
            this.getList();
          }
        });
      },
    },
  };
</script>
