<template>
  <ifrm ref="ifrm">
    <!-- 飞靶绑定-->
    <uni-forms ref="form" err-show-type="toast">
      <uni-forms-item
        ><input
          type="text"
          :focus="oneInputFcous"
          @input="oneInputBlur"
          v-model="oneInput"
          class="uni-input-border"
          placeholder="流程卡"
      /></uni-forms-item>
      <uni-forms-item
        ><input
          type="text"
          :focus="twoInputFcous"
          v-model="twoInput"
          @input="twoInputBlur"
          class="uni-input-border"
          placeholder="飞靶"
      /></uni-forms-item>
    </uni-forms>
    <view class="tableBox">
      <uni-card title="飞靶信息">
        <t-table>
          <t-tr>
            <t-td>编号</t-td>
            <t-td>{{ feibaObj.fsCode }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>名称</t-td>
            <t-td>{{ feibaObj.fsType }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>状态</t-td>
            <t-td>{{ feibaObj.statusName }}</t-td>
          </t-tr>
        </t-table>
      </uni-card>
      <t-table>
        <t-tr>
          <t-td>掺镀件面积</t-td>
          <t-td>
            <input type="text" v-model="formData.dopedParts" />
          </t-td>
        </t-tr>
        <t-tr>
          <t-td>网面积</t-td>
          <t-td>
            <input type="text" v-model="formData.net" />
          </t-td>
        </t-tr>
        <t-tr>
          <t-td>挂具面积</t-td>
          <t-td>
            <input type="text" v-model="formData.rack" />
          </t-td>
        </t-tr>
      </t-table>
      <uni-card
        :title="'流程卡 ' + planList.length + ' 批; ' + ' 总面积 ' + totalArea"
      >
        <uni-table border stripe emptyText="暂无更多数据" class="table">
          <uni-tr>
            <uni-th align="center">操作</uni-th>
            <uni-th align="center">当前工序</uni-th>
            <uni-th align="center">车间订单号</uni-th>
            <uni-th align="center">产品号</uni-th>
            <uni-th align="center">批次号</uni-th>
            <uni-th align="center">镀种</uni-th>
            <uni-th align="center">生产标识</uni-th>
            <uni-th align="center">数量</uni-th>
            <uni-th align="center">班组</uni-th>
            <uni-th align="center">工序号</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in planList" :key="index">
            <uni-td align="center" style="width: 200rpx"
              ><button
                size="mini"
                class="button"
                type="primary"
                @click="removeClick(item)"
              >
                删除
              </button></uni-td
            >
            <uni-td align="center">{{ item.ppsName }}</uni-td>
            <uni-td align="center">{{ item.woCode }}</uni-td>
            <uni-td align="center">{{ item.partCode }}</uni-td>
            <uni-td align="center">{{ item.batchNo }}</uni-td>
            <uni-td align="center">{{ item.plate }}</uni-td>
            <uni-td align="center">{{ item.prodIdent }}</uni-td>
            <uni-td align="center">{{ item.makeQty }}</uni-td>
            <uni-td align="center">{{ item.makeTeam }}</uni-td>
            <uni-td align="center">{{ item.orders }}</uni-td>
          </uni-tr>
        </uni-table>
      </uni-card>
    </view>
    <view class="buttonBox"
      ><button
        class="button"
        :disabled="Object.keys(feibaObj).length && !(planList.length > 0)"
        type="primary"
        @click="submitClick"
      >
        绑定
      </button></view
    >
  </ifrm>
</template>

<script>
import ifrm from "@/pages/index/ifrm";
import tTable from "@/components/t-table/t-table.vue";
import tTh from "@/components/t-table/t-th.vue";
import tTr from "@/components/t-table/t-tr.vue";
import tTd from "@/components/t-table/t-td.vue";
import inputBlur from "@/mixin/inputBlur.js";
export default {
  mixins: [inputBlur],
  components: {
    ifrm,
    tTable,
    tTh,
    tTr,
    tTd,
  },
  data() {
    return {
      feibaObj: {},
      planList: [],
      flag: false,
      formData: {
        dopedParts: null,
        net: null,
        rack: null,
      },
      totalArea: 0,
    };
  },
  methods: {
    oneInputData(code) {
      this.getData(code, 1);
    },
    twoInputData(code) {
      uni.hideKeyboard();
      this.getData(code, 2);
    },

    setArea() {
      this.totalArea = 0;
      if (this.planList.length > 0) {
        this.planList.forEach((item) => {
          this.totalArea += item.makeQty * item.area;
        });
      }
    },
    getData(code, num) {
      let url = "";
      if (num == 1) {
        //流程卡
        // url = "pdaLoad/loadBindData/" + code;

        this.oneInput = code;
        this.$u.api.loadBindData(code).then((res) => {
          let data = res.data;
          console.log(res);
          var bool = true;
          this.planList.forEach((item) => {
            if (item.id === data.id) {
              bool = false;
            }
          });
          if (bool) {
            this.planList.unshift(data);
          }
          this.clearOneInput();
          this.setArea();

          uni.showToast({
            title: "数据获取成功",
            icon: "none",
          });
        });
      } else {
        // 飞靶
        // url = "pdaLoad/getBsFeiBaSetByCode/" + code;
        this.twoInput = code;
        this.$u.api.getBsFeiBaSetByCode(code).then((res) => {
          let data = res.data;

          this.feibaObj = data;
          this.clearTwoInput();

          uni.showToast({
            title: "数据获取成功",
            icon: "none",
          });
        });
      }
      // this.$ajax.request({
      //   url,
      //   method: "GET",
      //   success: (data) => {
      //     console.log(data);
      // if (num == 1) {
      //   var bool = true;
      //   this.planList.forEach((item) => {
      //     if (item.id === data.bindModel.id) {
      //       bool = false;
      //     }
      //   });
      //   if (bool) {
      //     this.planList.unshift(data.bindModel);
      //   }
      //   this.clearOneInput();
      //   this.setArea();
      // } else {
      //   this.feibaObj = data;
      //   this.clearTwoInput();
      // }
      // uni.showToast({
      //   title: "数据获取成功",
      //   icon: "none",
      // });
      //   },
      // });
    },
    removeClick(obj) {
      this.planList.forEach((item, index) => {
        if (item.id == obj.id) {
          this.planList.splice(index, 1);
        }

        this.setArea();
      });
    },
    submitClick() {
      if (this.flag) return;
      this.flag = true;
      let planList = [];
      this.planList.forEach((item) => {
        planList.push(item.id);
      });
      this.$u.api
        .fbBindingCrad({
          planListIds:planList.join(','),
          fsId: this.feibaObj.id,
          ...this.formData
        })
        .then((res) => {
          uni.showToast({
            title: "绑定成功",
          });
          this.feibaObj = {};
          this.planList = [];
          this.clearInput();
          this.clearFcous();

          this.setArea();
          this.formData = {
            dopedParts: null,
            net: null,
            rack: null,
          };
          this.flag = false;
        })
        .catch((err) => {
          this.flag = false;
        });
      // this.$ajax.request({
      //   url: "pdaSave/fbBindingCrad",
      //   method: "POST",
      //   data: {
      //     planList,
      //     fsId: this.feibaObj.fsId,
      //     formData: this.formData,
      //   },
      //   success: (data) => {
      // uni.showToast({
      //   title: "绑定成功",
      // });
      // this.feibaObj = {};
      // this.planList = [];
      // this.clearInput();
      // this.clearFcous();

      // this.setArea();
      // this.formData = {
      //   dopedParts: null,
      //   net: null,
      //   rack: null,
      // };
      //   },
      //   fail: (err) => {
      //     this.flag = false;
      //   },
      //   complete: () => {
      //     this.flag = false;
      //   },
      // });
    },
  },
  onNavigationBarButtonTap(btn) {
    this.$refs.ifrm.topMenuClick(btn);
  },
};
</script>

<style scoped lang="less">
.uni-forms-item {
  margin-bottom: 6px !important;
}
</style>