<template>
  <div>
    <el-form :model="formData" :rules="formRules" ref="dataForm" label-width="120px">
      <el-row type="flex" justify="end">
        <el-button-group style="display: flex;margin-bottom: 15px; margin-right: 50px">
          <el-button type="primary" @click.native="saveOrder('1')" :loading="draftLoading">草稿保存</el-button>
          <el-button type="primary" @click.native="saveOrder('2')" :loading="submitLoading">提交单据</el-button>
        </el-button-group>
      </el-row>

      <el-card style="margin-top: -5px;">
        <el-row>
          <el-col :span="11">
            <el-form-item label="合同编号:" prop="code">
              <el-input v-model="formData.code" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="合同名称:" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="合同仓库:" prop="invCode">
              <el-select v-model="formData.invCode" placeholder="合同仓库信息" style="width: 100%"
                         clearable>
                <el-option
                  v-for="item in invCodeList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.code">
                  <span style="float: left">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="合同签订日期:" prop="contractDate">
              <el-date-picker
                v-model="formData.contractDate"
                style="width: 100%"
                type="datetime"
                placeholder="选择日期"
                :clearable="false"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled-date="disabledArrivalDate"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row >
          <el-col :span="11">
          <el-form-item label="合同类型:" prop="type">
            <el-select v-model="formData.type" placeholder="合同类型" style="width: 100%"
                       clearable>
              <el-option
                v-for="item in typeList"
                :key="item.name"
                :label="item.name"
                :value="item.code">
                <span style="float: left">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item
              prop="fromCorp"
              label="供应商:"

            >
              <el-select
                v-model="formData.fromCorp"
                filterable
                remote
                :disabled="corpOrderIdDisabled"
                clearable
                reserve-keyword
                placeholder="请选择供应商"
                :remote-method="findMethod"
                style="width: 100%"
              >
                <el-option
                  v-for="item in fromOptions"
                  :key="item.erpId"
                  :label="item.name"
                  :value="item.erpId"
                >
                  <span style="float: left">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>

<!--          <el-col :span="11">-->
<!--            <el-form-item label="合同状态:" prop="status">-->
<!--              <el-select v-model="formData.status" placeholder="合同状态" style="width: 100%" disabled-->
<!--                         clearable>-->
<!--                <el-option-->
<!--                  v-for="item in statusList"-->
<!--                  :key="item.name"-->
<!--                  :label="item.name"-->
<!--                  :value="item.code">-->
<!--                  <span style="float: left">{{ item.name }}</span>-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->



          <el-col :span="11">
            <el-form-item label="开始时间:" prop="startDate" >
              <el-date-picker
                style="width: 100%"
                v-model="formData.startDate"
                type="datetime"
                placeholder="选择日期"
                :clearable="false"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled-date="disabledArrivalDate"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="截止时间:" prop="endDate">
              <el-date-picker
                style="width: 100%"
                v-model="formData.endDate"
                type="datetime"
                placeholder="选择日期"
                :clearable="false"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled-date="disabledArrivalDate"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>



          <el-col :span="11">
            <el-form-item label="订单金额:" prop="amount">
              <el-input-number
                style="width: 60%"
                :precision="2"
                :step="1"
                :min="0.00"
                v-model="formData.amount" size="small" ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="合同金额:" prop="payAmount">
              <el-input-number
                style="width: 60%"
                :precision="2"
                :step="1"
                :min="0.00"
                v-model="formData.payAmount" size="small" ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>

          <el-col :span="11">
            <el-form-item label="付款日期:" prop="payDate">
              <el-date-picker
                style="width: 100%"
                v-model="formData.payDate"
                type="datetime"
                placeholder="选择日期"
                :clearable="false"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled-date="disabledArrivalDate"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="付款方式:" prop="payType">
<!--              <el-select v-model="formData.payType" placeholder="付款方式" style="width: 100%"-->
<!--                         clearable>-->
<!--                <el-option-->
<!--                  v-for="item in payTypeList"-->
<!--                  :key="item.name"-->
<!--                  :label="item.name"-->
<!--                  :value="item.code">-->
<!--                  <span style="float: left">{{ item.name }}</span>-->
<!--                </el-option>-->
<!--              </el-select>-->
              <el-input v-model="formData.payType" style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="11">
            <el-form-item label="备注:" prop="remark">
              <el-input v-model="formData.remark" style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card>
        <el-row type="flex" justify="end">
          <el-button-group style="display: flex">
            <el-button-group style="display: flex;margin-bottom: 15px; margin-right: 50px">
              <el-button type="primary" @click.native.stop="selectProductFunction()" :loading="loading">产品录入</el-button>
              <!--              <el-button type="primary" :loading="loading" @click.native.stop="selectApply()">选入申购单</el-button>-->
            </el-button-group>
          </el-button-group>
        </el-row>
        <el-table v-loading="loading" :data="codeArray" style="width: 100%;" :row-class-name="tableRowClassName" border
                  highlight-current-row max-height="300" height="300" ref="multipleTable">
          <el-table-column label="序号" type="index" width="60"></el-table-column>
          <el-table-column label="DI/物资编码" prop="nameCode"></el-table-column>
          <el-table-column label="物资名称" prop="productName" show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="规格型号" prop="ggxh" show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="价格" prop="price" show-overflow-tooltip="true" width="100"></el-table-column>
          <el-table-column width="100" label="数量">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.count"
                        placeholder="请输入数量" style="width: 80%"
                        type='number'
                        :disabled="scope.row.index !== selectedIndex"
                        oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="注册/备案号" prop="zczbhhzbapzbh"></el-table-column>
          <el-table-column label="生产厂家" prop="productCompany"></el-table-column>
          <el-table-column label="供应商" prop="supName"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" :disabled="scope.row.index === selectedIndex" @click.stop="true"
                         @click.native="rowChange(scope.row)">编辑
              </el-button>
              <el-button type="text" size="small" :disabled="scope.row.index !== selectedIndex" @click.stop="true"
                         @click.native="tableCountChange(scope.row)">保存
              </el-button>
              <el-button type="text" size="small" @click.stop="true"
                         @click.native="deleteCodeArray(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>

    <el-dialog
      title="产品录入"
      :visible.sync="selectProductVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="85%"
      v-if="selectProductVisible"
      :append-to-body='true'
    >
      <purContractProducts
        :closeDialog="closeDialogC2"
        :purType="1"
        :pId="pId"
        :stockOrderLists="this.stockOrderLists"
      ></purContractProducts>
    </el-dialog>

  </div>
</template>

<script>
import draggable from "vuedraggable";
import {getBasicUnitMaintains} from "@/api/basic/basicUnitMaintain";
import {
  inserThrOrderWeb,
  delApplyDetail,
  listApplyDetail,
  addContractId,
  selectContractDetail,
  updateDetail
} from "@/api/purchase/purContract";
import {parseTime} from "@/utils/coTools";
import purContractProducts from "@/views/purchase/purContract/purContractSelectProduct";
import {findInvByUser} from "@/api/system/invSubWarehouse";

export default {
  name: "idQuery",
  props: {
    pageType: {
      type: Object,
      required: true,
    },
    closeDialog: {
      type: Function,
      required: true,
    },
    idQuery: {
      type: Object,
      required: true,
    },
    isChang: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      code: "",
      query: {
        orderIdFk: "",
        page: 1,
        limit: 1000,
      },
      fromOptions: [],
      typeList: [
        {name: '战略', code: 1},
        {name: '长期', code: 2},
        {name: '短期', code: 3}
      ],
      statusList: [
        {name: '草稿', code: 1},
        {name: '未审核', code: 2},
        {name: '已审核', code: 3}
      ],
      payTypeList: [
        {name: '银行', code: 1},
        {name: '微信', code: 2},
        {name: '支付宝', code: 3}
      ],
      formData: {
        id: null,
        code: null,
        name: "",
        fromCorp: '',
        remark: "",
        invCode: "",
        contractDate: null,
        status: null,
        type: null,
        startDate: null,
        endDate: null,
        amount: null,
        payAmount: null,
        payType: null,
        payDate: null,
        pageType: null,
      },
      pId: null,
      formRules: {},
      codeArray: [],
      stockOrderLists: [],
      total: 0,
      loading: false,
      draftLoading: false,
      submitLoading: false,
      index: null,
      formLoading: false,
      formVisible: false,
      deleteLoading: false,
      orderNo: null,
      statusMap: {
        1: "草稿",
        2: "未审核",
        3: "已审核",
      },
      typeMap: {
        1: "预入库",
        2: "普通采购",
      },
      orderEditor: true,
      sOptions: [],
      sValue: [],
      sList: [],
      sLoading: false,
      busTypes: [],
      currentRow: {},
      selectedIndex: "",
      selectProductVisible: false,
      thisData: {},
      storageList: [],
      invCodeList: [],
      invQueryData: {},
      selectApplyVisible: false
    };
  },
  watch: {
    isChang: function () {
      this.$emit("cancelDialog", this.pId);
    },
  },
  components: {
    draggable,
    purContractProducts,
    // SelectApplyListDialog
  },
  methods: {
    productListChange() {
      this.getStockOrderDetailList()
    },
    //获取往来单位候选列表
    findMethod(query) {
      this.fromOptions = [];
      let cQuery = {
        key: query,
        corpType: 2,
        outType: null,
        page: 1,
        limit: 20,
      };
      getBasicUnitMaintains(cQuery)
        .then((response) => {
          this.loading = false;
          this.fromOptions = response.data.list || [];
        })
        .catch(() => {
          this.loading = false;
        });
    },
    saveOrder(status) {

      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.codeArray.length < 1) {
            this.$message.warning('未添加产品');
            return;
          }
          if (status === '1') {
            if (this.formData.status == 2 || this.formData.status == 3) {
              return this.$message.error("当前单据状态不可以进行草稿保存！");
            }
          }
          if (status === '2') {
            if (this.formData.status == 2 || this.formData.status == 3) {
              return this.$message.error("当前单据状态不可以进行提交审核！");
            }

          // // if (this.formData.billType == "" || this.formData.billType == null) {
          // //     return this.$message.error("采购类型不能为空！");
          // // }
          // if (this.formData.invCode == "" || this.formData.invCode == null) {
          //   return this.$message.error("采购仓库不能为空！");
          // }
          // if (this.formData.emergency == "" || this.formData.emergency == null) {
          //   return this.$message.error("紧急程度不能为空！");
          // }
          // if (this.formData.arrivalTime == "" || this.formData.arrivalTime == null) {
          //   return this.$message.error("到货时间不能为空！");
          // }
          // if (this.formData.arrivalTime < this.formData.createTime) {
          //   return this.$message.error("到货时间不能比单据日期早！！！");
          // }
          // for (let i = 0; i < this.codeArray.length; i++) {
          //   if (this.$isBlank(this.codeArray[i].count) || this.codeArray[i].count == "0") {
          //     return this.$message.error('单据数量不能为0');
          //   }
          // }
        }
        if (status == "1") {
          this.submitFunction(status);
        } else {
          let tip = "是否确定提交订单?";
          this.$confirm(tip, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.submitLoading = true
            this.submitFunction(status);
          }).catch(() => {
            if (status == '1'){
              this.draftLoading = false
            }else {
              this.submitLoading = false
            }
          });
        }
      }
    }
)
;
},
disabledArrivalDate(time)
{
  return time.getTime() < new Date(this.formData.createTime).getTime()
}
,
submitFunction(status)
{
  let tMessage = status === '1' ? '保存' : '提交';
  this.loading = true;
  this.formData.id = this.pId;
  this.formData.pageType = this.pageType
  let tQuery = {
    editStatus: status,
    purContractEntity: this.formData,
    subErpOrders: this.codeArray,
    type: 1,
  }
  if (status == '1'){
    this.draftLoading = true
  }
  inserThrOrderWeb(tQuery)
    .then(response => {
      if (status == '1'){
        this.draftLoading = false
      }else {
        this.submitLoading = false
      }
      if (response.code === 20000) {
        this.$message.success(tMessage + "成功");
        this.closeDialog(true);
      } else {
        this.$message.error(response.message);
      }
    })
    .catch(() => {
      if (status == '1'){
        this.draftLoading = false
      }else {
        this.submitLoading = false
      }
    })
}
,
selectProductFunction()
{
  this.selectProductVisible = true;
  //当父id为空的时候生成id
  if (this.pId == null) {
    addContractId().then(response => {
      if (response.code === 20000) {
        this.pId = response.data
      }
    }).catch(() => {
      this.loading = false;
    })
  }
  this.stockOrderLists = this.codeArray;
}
,
setDeptCode(obj)
{
  this.formData.deptCode = this.invCodeList.find(item => item.code == obj).parentId;
}
,
closeDialogC2()
{
  this.selectProductVisible = false;
  this.selectApplyVisible = false;
  this.query.orderIdFk = this.pId
  selectContractDetail(this.query) //查找该单号下的所有条码
    .then((response) => {
      console.log(response)
      this.codeArray = response.data.list || [];
      this.total = response.data.total || 0;
      this.loading = false;
    })
    .catch(() => {
      this.loading = false;
      this.list = [];
      this.total = 0;
    });
}
,
rowChange(val)
{
  this.currentRow = val;
  this.selectedIndex = val.index;
}
,
tableCountChange(row)
{
  if (this.$isNotBlank(row)) {
    updateDetail(this.currentRow);
    this.selectedIndex = null
  }
}
,
tableRowClassName({row, rowIndex})
{
  row.index = rowIndex;
}
,
// 刷新表单
resetForm()
{
  if (this.$refs["dataForm"]) {
    // 清空验证信息表单
    this.$refs["dataForm"].clearValidate();
    // 刷新表单
    this.$refs["dataForm"].resetFields();
    this.getList();
  }
}
,
deleteCodeArray(index, row)
{
  this.detailLoading = true;
  this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    this.$refs.multipleTable.setCurrentRow();
    this.currentRow = {};
    this.selectedIndex = "";
    // console.log(this.orderEditor)
    // if (!this.orderEditor) {
    this.detailLoading = true;
    if (this.$isNotBlank(row.id)) {
      let delIds = [];
      delIds.push(row.id)
      delApplyDetail(delIds)
        .then(response => {
          this.detailLoading = false;
          if (response.code === 20000) {
            this.$message.success(response.data);
            this.getStockOrderDetailList();
            this.codeArray.splice(index, 1);
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.detailLoading = false;
        })
    } else {
      this.$message.success('删除成功');
      this.codeArray.splice(index, 1);
    }
    // } else {
    //   this.$message.success('删除成功');
    //   this.codeArray.splice(index, 1);
    // }
  }).catch(() => {

  });
}
,
getStockOrderDetailList()
{
  this.loading = true;
  listApplyDetail(this.query) //查找该单号下的所有条码
    .then((response) => {
      console.log(response)
      this.codeArray = response.data.list || [];
      this.total = response.data.total || 0;
      this.loading = false;
    })
    .catch(() => {
      this.loading = false;
      this.list = [];
      this.total = 0;
    });
}
,
findSubInvs()
{
  this.invCodeList = [];
  let query = {
    filter: 3
  };
  findInvByUser(query)
    .then((response) => {
      this.invCodeList = response.data || [];
      if (this.invCodeList != null && this.invCodeList.length == 1) {
        this.formData.invCode = this.invCodeList[0].code;
        this.formData.deptCode = this.invCodeList[0].parentId;

      }
    })
    .catch(() => {
    });
}
,
selectApply()
{
  this.selectApplyVisible = true;
  //当父id为空的时候生成id
  if (this.pId == null) {
    addPlanId().then(response => {
      if (response.code === 20000) {
        this.pId = response.data
      }
    }).catch(() => {
      this.loading = false;
    })
  }
}
,
},
filters: {
}
,
mounted()
{
  document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
  };
}
,
created()
{
  if (this.$isNotBlank(this.idQuery.id)) {
    this.query.limit = 1000;
    this.pId = this.idQuery.id;
    this.query.orderIdFk = this.idQuery.id;
    this.formData = this.idQuery.formData;
    this.orderEditor = true;
    this.sValue = this.formData.corpName;
    this.getStockOrderDetailList();
  } else {
    var date = new Date();
    this.formData = {
      id: null,
      billNo: null,
      remark: "",
      billType: "CGJH",
      deptCode: null,
      incCode: null,
      createTime: parseTime(
        date,
        "{y}-{m}-{d} {h}:{i}:{s}"
      ),
    };
    this.orderEditor = false;
  }
  this.findSubInvs();
  this.codeArray = [];
}
,
}
;
</script>
<style scoped>

.ao-text {
  width: 100%;
  font-size: 13px;
  font-family: "Microsoft YaHei";
  float: right;
  text-align: right;
  margin-top: 10px;
}

</style>



