<template>
  <div class="detail-main">
    <h2
      style="
        text-align: center;
        font-weight: 600;
        margin-bottom: 10px;
        color: #4588db;
        font-size: 18px;
      "
    >
      货源(仓号)表
    </h2>
    <el-table :data="tableData" stripe border>
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="60"
      ></el-table-column>
      <el-table-column
        prop="dwmc"
        align="center"
        label="承储单位"
        min-width="160"
      >
        <template slot-scope="scope" class="cell">
          <el-select
            v-model="scope.row.dwmc"
            @change="handleCompanyChange($event, scope.$index)"
            :disabled="isView"
            clearable
          >
            <el-option
              v-for="item in companies"
              :key="item.dwbm"
              :value="item.dwmc"
              :label="item.dwmc"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="ccdd" align="center" label="储存地点">
        <template slot-scope="scope">
          <el-input v-model="scope.row.ccdd" :disabled="isView"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="pzmc"
        align="center"
        label="品种"
        show-overflow-tooltip
      >
        <!-- <template slot-scope="scope">
                <span>{{scope.row.pzmc}}</span>
        </template>-->
      </el-table-column>
      <el-table-column prop="lssl" align="center" label="数量">
        <template slot-scope="scope">
          <el-input v-model="scope.row.lssl" :disabled="isView"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="scnd" align="center" label="生产年度">
        <template slot-scope="scope" class="cell">
          <span>{{ scope.row.scnd }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="item"
        v-for="(item, index) in qtypes[type]"
        :key="index"
      >
        <template slot-scope="scope">{{ scope.row[qnames(item)] }}</template>
      </el-table-column>
      <!-- <el-table-column prop="rz" align="center" label="容重g/L">
				<template slot-scope="scope">
					<el-input v-model="scope.row.rz" :disabled="isView"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="sf" align="center" label="水分%">
				<template slot-scope="scope">
					<el-input v-model="scope.row.sf" :disabled="isView"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="zhaz" align="center" label="杂质%">
				<template slot-scope="scope">
					<el-input v-model="scope.row.zhaz" :disabled="isView"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="bwsl" align="center" label="不完善粒%">
				<template slot-scope="scope">
					<el-input v-model="scope.row.bwsl" :disabled="isView"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="szqw" align="center" label="色泽气味">
				<template slot-scope="scope">
					<el-input v-model="scope.row.szqw" :disabled="isView"></el-input>
				</template>
      </el-table-column>-->
      <el-table-column prop="thqx" align="center" label="提货期限" width="140">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.thqx"
            type="date"
            value-format="yyyy-MM-dd"
            :disabled="isView"
          ></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="90" v-if="!isView">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="light"
            content="删除"
            placement="top"
          >
            <el-button
              @click="handleDelRow(scope.$index)"
              type="primary"
              class="operate_delete_btn iconfont iconshanchu"
              size="small"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-row v-if="!isView">
      <div class="add-table-item">
        <el-tooltip class="item" effect="light" content="新增" placement="top">
          <el-button
            @click="handleAddRow"
            type="text"
            class="iconfont iconzengjia"
          ></el-button>
        </el-tooltip>
      </div>
    </el-row>
    <el-form :model="detailForm" ref="detailForm">
      <el-row v-if="!(!detailForm.hyshjg && $route.query.state == 2)">
        <el-form-item label="接受委托" label-width="150px" required>
          <el-radio-group
            v-model="detailForm.hyshjg"
            :disabled="!isConfirm"
            class="input-w"
            @change="handleResult"
          >
            <el-radio label="0">确认</el-radio>
            <el-radio label="1">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row v-if="!(!detailForm.hyshjg && $route.query.state == 2)">
        <el-form-item
          label="意见"
          label-width="150px"
          prop="hyyj"
          :rules="{
            required: true,
            message: '请填写审核意见',
            trigger: 'blur',
          }"
          class="textarea"
        >
          <el-input
            :disabled="!isConfirm"
            v-model="detailForm.hyyj"
            :autosize="{ minRows: 3 }"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row class="footer">
      <el-button
        v-if="isConfirm"
        @click="handleConfirm"
        class="iconfont iconbaocun"
        type="primary"
        size="small"
      >
        保存
        <!--保存-->
      </el-button>
      <el-button
        v-if="isConfirm"
        @click="handleConfirmAndSubmit"
        class="iconfont iconbaocun"
        type="primary"
        size="small"
        v-show="isNotRefuse"
      >
        保存并发布
        <!--确认并发布-->
      </el-button>
      <!-- <el-button type="primary" v-if="!isView" size="small" @click="handleSave" class="iconfont iconbaocun"
				>保存</el-button
      >-->
      <el-button
        type="primary"
        v-if="!isView"
        size="small"
        @click="handleSubmit"
        class="iconfont icontijiao"
        >提交</el-button
      >
      <el-button
        type="primary"
        size="small"
        @click="$router.push('index')"
        class="iconfont iconfanhui"
        >返回</el-button
      >
    </el-row>
  </div>
</template>

<script>
import {
  companies,
  varietys,
  insert,
  update,
  detail,
} from "@/api/transaction/tradePlan/goodsSourceTable/index.js";
import { qtypes, getType, qnames } from "@/utils/quality";
export default {
  data() {
    return {
      type: "", // 当前品种类型, 归属qtypes里的
      qtypes: qtypes,
      isNotRefuse: true,
      planData: {
        pzbm: "",
        dwbm: "",
        lssl: "",
        scnd: "",
        sfbg: "",
        remark: "",
        sjlx: 1, // 安排0, 货源1
        wtbm: "",
        ccdd: "",
        rz: "",
        zhaz: "",
        bwsl: "",
        szqw: "",
        thqx: "",
      },
      tableData: [],
      rowData: {},
      companies: [],
      variety: [],
      detailForm: {
        // apzt: '',
        // apztmc: '',
        wtbm: "",
        jylx: "",
        hyshjg: "0", // 是否接受
        hyyj: "",
        hybztmc: "",
        hybzt: "",
      },
      isAdd: false,
      isView: false,
      isConfirm: false,
      jyrq: "", // 交易日期
      isValid: false,
    };
  },
  created() {
    // state 0 add 1 update 2 detail 3 confirm
    let { state, wtbm, jylx, jyrq, lsxzbm } = this.$route.query;

    this.jyrq = jyrq;
    this.detailForm.wtbm = wtbm;
    this.detailForm.jylx = jylx;
    this.detailForm.lsxzbm = lsxzbm;
    this.planData.wtbm = wtbm;
    this.planData.jylx = jylx;
    if (state == 0) {
      this.isAdd = true;
      this.tableData.push(this.planData);
    }
    this.getDetail();
    if (state == 2) {
      this.isView = true;
    } else {
      // this.getCompanies()
      // this.getTypes()
    }
    if (state == 3) {
      this.isView = true;
      this.isConfirm = true;
    }
  },
  methods: {
    handleResult(val) {
      if (this.detailForm.hyshjg == 1) {
        this.detailForm.hybzt = "91000008";
        this.detailForm.hybztmc = "已驳回";
        this.tableData.forEach((d) => {
          d.zt = null;
          d.ztmc = null;
        });
      } else {
        this.detailForm.hybzt = "91000018";
        this.detailForm.hybztmc = "已确认";
        this.tableData.forEach((d) => {
          d.zt = "91000001";
          d.ztmc = "待提交";
        });
      }
      this.isNotRefuse = !this.detailForm.hyshjg;
    },
    qnames(val) {
      return qnames(val);
    },
    async checkInput() {
      await this.$refs.detailForm.validate((valid) => {
        if (!valid) this.$message.warning("请先完成必填项");
        this.isValid = valid;
      });
    },
    async handleConfirm() {
      await this.checkInput();
      if (!this.isValid) return;
      this.detailForm.wtfbm = this.$route.query.wtfbm;
      this.detailForm.url = `/transaction/trading/transactionSignupFood/index`;
      this.update();
    },
    async handleConfirmAndSubmit() {
      await this.checkInput();
      if (!this.isValid) return;
      this.detailForm.wtfbm = this.$route.query.wtfbm;
      this.detailForm.url = `/transaction/trading/transactionSignupFood/index`;
      this.update(true);
    },
    getDetail() {
      detail({
        wtbm: this.detailForm.wtbm,
        sjlx: 1, // 货源1, 安排0
        aplx: 1,
      }).then((res) => {
        if (res.infoCode === 200) {
          // this.companies = res.data
          this.detailForm = res.data.entryAndExitOrderVO;
          this.tableData = res.data.details;
          if (res.data.details && res.data.details.length) {
            let _type = res.data.details[0].pzmc;
            this.type = getType(_type);
          }
          this.handleResult();
          if (this.$route.query.state == 3) {
            this.detailForm.hyshjg = "0";
          }
        }
      });
    },
    handleSave() {
      this.detailForm = {
        ...this.detailForm,
        hybzt: "91000001",
        hybztmc: "待提交",
      };
      if (this.isAdd) {
        this.insert();
        return;
      }
      this.update();
    },
    handleSubmit() {
      this.detailForm = {
        ...this.detailForm,
        hybzt: "91000004",
        hybztmc: "已提交",
      };
      if (this.isAdd) {
        this.insert();
        return;
      }
      this.update();
    },
    insert() {
      insert({
        details: this.tableData,
        entryAndExitOrderVO: this.detailForm,
        aplx: 1,
      }).then((res) => {
        if (res.infoCode === 200) {
          this.$message.success(res.msg);
          this.$router.push("index");
          return;
        }
        this.$message.error(res.msg);
      });
    },
    update(isPublish = false) {
      update({
        details: this.tableData,
        entryAndExitOrderVO: this.detailForm,
        aplx: 1,
      }).then((res) => {
        if (res.infoCode === 200) {
          let tipmsg = this.detailForm.hyshjg == 0 ? "审核" : "驳回";
          this.$message.success(tipmsg + "成功!");
          if (isPublish) {
            this.$router.push({
              path: "publish",
              query: {
                wtbm: this.detailForm.wtbm,
                jylx: this.detailForm.jylx,
                jyrq: this.jyrq,
                lsxzbm: this.detailForm.lsxzbm,
              },
            });
            return;
          }
          this.$router.push("index");
          return;
        }
        this.$message.error(res.msg);
      });
    },
    handleBillChange(val, index) {
      this.tableData[index].sf = val == 0 ? "是" : "否";
    },
    handleCompanyChange(val, index) {
      let cur = this.companies.filter((item) => item.dwmc == val)[0];
      cur.lssl = "";
      this.tableData[index] = Object.assign(this.tableData[index], cur);
      // this.tableData[index].dwbm = cur.kddm
    },
    handleVarietyChange(val, index) {
      let cur = this.variety.filter((item) => item.dictName == val)[0];
      this.tableData[index].pzbm = cur.dictCode;
    },
    handleAddRow() {
      this.tableData.push({
        ...this.planData,
      });
    },
    handleDelRow(index) {
      this.tableData.splice(index, 1);
    },
    // getCompanies() {
    //     companies().then(res => {
    //         this.companies = res.data
    //     })
    // },
    getTypes() {
      varietys(11).then((res) => {
        this.variety = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-main {
  width: 100%;
  padding: 20px 0;

  .add-table-item {
    text-align: right;
    margin-right: 36px;

    .iconfont {
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
    }
  }

  .footer {
    text-align: center;
    margin: 20px 0;
  }
}
</style>
