<template>
  <div>
    <BaseDialog
      width="900px"
      :isShow.sync="isDialog"
      title="订单结算"
      @submit="confirmSubmit"
      @close="close"
      confirmName="提交审核"
    >
      <div style="max-height: 600px; overflow-y: auto; overflow-x: hidden">
        <div class="searchBox">
          <span>商品类型：{{ getGoodsType(goodsItem.goodsType) }}</span>
          <span>教育类型：{{ goodsItem.educationName }}</span>
          <span
            >培训项目：{{
              goodsItem.projectName + "/" + goodsItem.businessName
            }}</span
          >
          <el-table
            :data="tableData"
            style="width: 100%; text-align: center"
            :border="true"
            fit
            :header-cell-style="{
              color: '#333',
              fontSize: '14px',
              'text-align': 'center',
            }"
            :cell-style="{
              'text-align': 'center',
            }"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <el-table-column prop="goodsId" label="类别/商品">
              <template slot-scope="scope">
                {{ changeGoodsType(scope.row.goodsType) }}
                {{ scope.row.goodsName }}
              </template>
            </el-table-column>
            <el-table-column prop="subjectId" label="科目">
              <template slot-scope="scope">
                {{ scope.row.subjectNames }}
              </template>
            </el-table-column>
            <el-table-column prop="applicationDate" label="年份">
              <template slot-scope="scope">
                {{ scope.row.year }}
              </template>
            </el-table-column>
            <el-table-column prop="applicationDate" label="成交单价">
              <template slot-scope="scope">
                ￥{{ scope.row.standPrice ? scope.row.standPrice.toFixed(2) : 0}}
              </template>
            </el-table-column>
            <el-table-column prop="applicationDate" label="数量">
              <template slot-scope="scope">
                {{ scope.row.goodsNum }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <div>支付方式：</div>
          <div class="payment">
            <div
              v-for="(item, index) in 5"
              :key="index"
              class="paymentItem"
              :class="{ activeItem: activeIndex == index }"
              @click="selectActive(index)"
            >
              对公转账
            </div>
          </div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            :inline="true"
            label-width="80px"
          >
            <el-form-item label="收件信息:" prop="companyContacts">
              <el-input
                class="inputWidth"
                v-model="ruleForm.companyContacts"
                placeholder="输入姓名"
              ></el-input>
              <el-input
                class="inputWidth"
                v-model="ruleForm.companyContacts"
                placeholder="输入手机"
              ></el-input>
              <el-input
                style="width: 240px"
                v-model="ruleForm.companyContacts"
                placeholder="输入地址"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="协议额度:"
              prop="contactPhone"
              style="width: 100%"
            >
              1231231231231231231
            </el-form-item>
            <el-form-item label="订单金额:" prop="contactPhone">
              <span style="font-size: 16px;color: red;">
                ￥{{  goodsOrder.totalGoodsPrice ?  goodsOrder.totalGoodsPrice.toFixed(2) : 0}}
              </span>
              <span style="font-size: 12px;">（人数：{{ goodsOrder.peopleNum }} / 数量：{{ goodsOrder.totalGoodsNum }}）</span>
            </el-form-item>
            <el-form-item
              label="支付方式:"
              prop="department"
              style="width: 100%"
            >
              <el-input
                class="inputWidth"
                v-model="ruleForm.department"
                placeholder="输入如“线下微信扫码支付”"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请单价:" prop="position">
              <el-input
                class="inputWidth"
                v-model="ruleForm.position"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请总价:" prop="position">
              <el-input
                class="inputWidth"
                v-model="ruleForm.position"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="支付金额:" prop="position">
              <el-input
                class="inputWidth"
                v-model="ruleForm.position"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请备注:" prop="position">
              <el-input
                class="inputWidth"
                v-model="ruleForm.position"
                placeholder="请输入"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="上传凭证:"
              props="businessImg"
              style="width: 100%"
            >
              <div class="imgBox">
                <div>
                  <label for="businessImg" @click="uploadImg">
                    <span
                      class="el-icon-circle-plus-outline iconStsz"
                      style="color: #1890ff"
                      >支付凭证</span
                    >
                  </label>
                </div>
                <span style="color: #999; font-size: 12px">支持:PNG、JPG</span>
              </div>

              <div v-if="ruleForm.businessImg" class="img">
                <el-image
                  style="width: 100px; height: 100px; object-fit: contain"
                  :src="$methodsTools.splitImgHost(ruleForm.businessImg)"
                  :preview-src-list="[
                    $methodsTools.splitImgHost(ruleForm.businessImg),
                  ]"
                >
                </el-image>
                <div class="sign" @click="clearImgs()">X</div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="
            display: flex;
            padding-top: 20px;
            border-top: 1px dashed #dcdfe6;
          "
        >
          <div class="left" style="flex: 1; margin-right: 25px">
            <label>第一步：对公转账</label>
            <div
              style="background: #f9fafb; padding: 20px; margin-top: 15px"
            ></div>
          </div>
          <div class="right" style="flex: 1">
            <label>第二步：填写公司信息及上传付款回执</label>
          </div>
        </div>
      </div>
    </BaseDialog>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      listData: {},
      ruleForm: {},
      rules: {
        companyName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        companyType: [
          { required: true, message: "企业类型", trigger: "change" },
        ],
      },
      isDialog: false,
      tableData: [],
      goodsItem: {},
      activeIndex: 0,
      goodsOrder: {},
    };
  },
  computed: {
    //获取商品类型
    getGoodsType: function () {
      return function (goodsType) {
        var str = "";
        switch (goodsType) {
          case 1:
            str = "课程";
            break;
          case 2:
            str = "题库";
            break;
          case 6:
            str = "直播";
            break;
          case 10:
            str = "商品包";
            break;
          default:
            break;
        }
        return str;
      };
    },
    /**
     * 转换匹配商品类型
     */
    changeGoodsType() {
      return function (goodsType) {
        var str = "";
        switch (goodsType) {
          case 1:
            str = "课：";
            break;
          case 2:
            str = "题：";
            break;
          case 6:
            str = "直：";
            break;
          default:
            break;
        }
        return str;
      };
    },
  },
  mounted() {},

  methods: {
    openBoxs(row) {
      console.log(row, "row");
      this.isDialog = true;
      this.ruleForm = {};
      this.goodsOrder = {
        peopleNum: 0,
        totalGoodsNum: 0,
        totalGoodsPrice: 0,
      };
      this.tableData = this.changeGoodsListData(row);
      this.goodsItem = row.goodsItem;
    },
    changeGoodsListData(row) {
      this.goodsOrder.peopleNum = row.tableData.length;
      let flatGoodsList = row.tableData.reduce((acc, item) => {
        return acc.concat(
          ...item.subjectIdsList.map((i) => i.goodsIdsList || [])
        );
      }, []);
      const obj = {};
      flatGoodsList.forEach((item) => {
        const key = `${item.subjectId}-${item.goodsId}-${item.goodsType}`;
        if (!obj[key]) {
          obj[key] = {
            count: 0,
            item,
          };
        }
        if (item.checked) {
          obj[key].count++;
          this.goodsOrder.totalGoodsPrice += Number(item.standPrice);
        }
      });
      const result = Object.values(obj).map((group) => {
        this.goodsOrder.totalGoodsNum += group.count;
        return {
          ...group.item,
          goodsNum: group.count,
        };
      });
      console.log(this.goodsOrder, "---goodsOrder-------");
      return result;
    },
    // 选中支付方式
    selectActive(index) {
      this.activeIndex = index;
    },
    // 确认提交审核
    confirmSubmit() {},
    close() {},
    // 上传操作
    async uploadImg(e) {
      // console.log(this.$methodsTools.submitUpload(1).then(res => res), 'submitUpload')
      this.$set(
        this.ruleForm,
        "businessImg",
        await this.$methodsTools.submitUpload(1).then((res) => res)
      );
    },
    // 清除上传图片
    clearImgs() {
      this.$set(this.ruleForm, "businessImg", "");
    },
  },
};
</script>
  
<style lang="scss" scoped>
.payment {
  display: flex;
  .paymentItem {
    padding: 8px 10px;
    border: 1px solid #d7d7d7;
    margin: 10px 10px 10px 0;
    border-radius: 8px;
    cursor: pointer;
  }
  .activeItem {
    background: #1890ff;
    color: white;
    border: none;
  }
}

.inputWidth {
  width: 245px;
  margin-right: 10px;
}

.img {
  text-align: center;
  position: relative;
  margin-top: 5px;

  .sign {
    z-index: 9;
    top: -15px;
    right: -15px;
    position: absolute;
    border-radius: 50%;
    font-size: 14px;
    transform: scale(0.7);
    color: red;
    background: #fafafa;
    font-weight: bold;
    padding: 0 13px;
    cursor: pointer;
    &:hover {
      background: red;
      color: #fafafa;
    }
  }
}

.imgBox {
  border: 2px dashed #999;
  border-radius: 15px;
  text-align: center;
  padding: 25px 10px 10px;
}

.searchBox {
  padding: 16px;
  margin: 0 0 10px 0;
  border-radius: 8px;
  box-shadow: 0px 0px 9px 1px rgba(28, 41, 90, 0.1);
  background: #ffffff;
  color: #333;
  font-size: 14px;
  line-height: 33px;
  span:nth-child(2) {
    margin: 0 20px;
  }
  span:nth-child(3) {
    margin-right: 10%;
  }
}
/deep/.el-button {
  border-radius: 8px;
}
</style>
  