<template>
  <div class="outOrderTable">
    <el-table
      :data="tableData"
      border
      :size="'mini'"
      style="width: 100%"
      row-key="key"
      max-height="400px"
    >
      <el-table-column
        show-overflow-tooltip
        prop="orderCode"
        label="咨询订单号"
        width="150"
      />

      <el-table-column
        show-overflow-tooltip
        prop="outCode"
        label="发货申请单号"
        width="150"
      />
      <el-table-column
        show-overflow-tooltip
        prop="apply_name"
        label="申请人名称"
        width="85"
      />
      <el-table-column
        show-overflow-tooltip
        prop="status"
        label="状态"
        width="80"
      >
        <template slot-scope="scope">
          <el-tag
            :size="tablebtnSize"
            :type="scope.row.status == '0' ? 'warning' : ''"
            v-text="
              (statusOptions.find((item) => item.id == scope.row.status) || {})
                .label || '--'
            "
          ></el-tag>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="sendtime"
        label="发货时间"
        min-width="170"
      />
      <el-table-column
        show-overflow-tooltip
        prop="send_num"
        label="	发货数量"
        width="80"
      />
      <el-table-column
        show-overflow-tooltip
        prop="contact"
        label="联系人"
        width="80"
      />
      <el-table-column
        show-overflow-tooltip
        prop="mobile"
        label="联系电话"
        width="110"
      />
      <!-- <el-table-column
        show-overflow-tooltip
        prop="addr_info"
        label="省市区"
        min-width="170"
      /> -->
      <el-table-column
        show-overflow-tooltip
        prop="addr"
        label="收货地址"
        min-width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.addr_info }} {{ scope.row.addr }}
        </template></el-table-column
      >

      <el-table-column fixed="right" width="50">
        <template slot="header" slot-scope="scope">
          <el-tooltip
            style="margin: 3px 0 0 5px"
            effect="dark"
            v-if="!isAll && powers.some((item) => item == '048')"
            content="添加"
            placement="top"
          >
            <i
              class="el-icon-circle-plus-outline tb-icon"
              style="color: #63cbe7"
              @click="openHouseModal()"
            ></i>
          </el-tooltip>
          <span v-else>操作</span>
        </template>

        <template slot-scope="scope">
          <el-tooltip
            effect="dark"
            content="查看"
            v-if="!scope.row.edit"
            placement="top"
          >
            <i
              class="el-icon-view tb-icon"
              @click="routeGoto('zxoutOrderDetail', { id: scope.row.outCode })"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <out-order-add-model
      :showModel="modelShowModel"
      :id="modelId"
      :sitem="modelItem"
      @refresh="initForm"
    />
    <add-edit
      :id="modelId"
      :sitem="s_sitem"
      :show-model="showModel"
      :is-detail="isDetail"
      @refresh="$emit('refresh')"
      @cancel="showModel = false"
    />
  </div>
</template>
   <script>
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
import outOrderAddModel from "./out-order-add-model";
import addEdit from "@/views/sellOut/sellAfterApply/components/addEdit";
import { mapGetters } from "vuex";

export default {
  name: "zxOrderDetail",
  mixins: [mixinPage, resToken],
  props: ["newTime", "id", "sitem"],
  components: { addEdit, outOrderAddModel },
  watch: {
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),

    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "zxOrderDetail"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },

  data() {
    return {
      // 状态
      statusOptions: [
        { id: "0", label: "待发货" },
        { id: "1", label: "已出库" },
        { id: "2", label: "验收中" },
        { id: "3", label: "验收完成" },
      ],
      showGoodsModel: false,
      stock_code: "",
      tableData: [],
      loading: false,
      queryId: "",
      status: "",
      showModel: null,
      modelId: "",
      isAll: true,
      modelItem: null,
      s_sitem: null,
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.status = "";
      this.queryId = this.$route.query.id;
      this.resetForm();
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        const { orderout, status, good_num } = this.sitem;
        if (status === "1" || status === "2") {
          let total = 0;
          orderout.forEach((v) => {
            total += parseInt(v.send_num);
          });
          console.log(total);
          if (total === parseInt(good_num)) {
             this.isAll = true;
          } else {
             this.isAll = false;
          }
        } else {
           this.isAll = false;
        }
        this.tableData = JSON.parse(JSON.stringify(orderout)) ;
      });
    },
    openHouseModal() {
      this.modelId = "add";
      this.modelItem = this.sitem;
      this.modelShowModel = true;
    },

    openModal(code, btn_code) {
      this.s_sitem = btn_code;
      this.btn_code = btn_code;
      this.modelId = code;
      this.showModel = true;
    },
  },
};
</script>
   <style lang="scss" scoped>
</style>
   