<template>
  <div>
    <el-dialog
      title="订单商品详情"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <el-table v-loading="loading" :data="spuList" :border="true">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="商品名称" align="center" prop="skuName" />
          <el-table-column label="商品规格" align="center" prop="storeName">
            <template slot-scope="scope">
              <span v-for="(item, index) in scope.row.specsValue">
                {{ item.specsName }}:{{ item.specsValue }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="商品分类"
            align="center"
            prop="categoryName"
          />
          <el-table-column label="单价" align="center" prop="price">
            <template slot-scope="scope">
              ￥{{ scope.row.price }}{{ scope.row.unit }}
            </template>
          </el-table-column>
          <el-table-column label="数量" align="center" prop="quantity">
          </el-table-column>
          <el-table-column label="优惠" align="center" prop="discountAmount" />
          <el-table-column label="包装费" align="center" prop="packingPrice" />
          <el-table-column label="配送费" align="center" prop="freightFee" />
          <el-table-column
            label="总金额"
            align="center"
            prop="totalOrderAmount"
          />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { spuInfoByCarPayNo, storeMultipleShopSave } from "@/api/chain/index";
export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      spuList: [],
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        key: "",
      },
      info: {},
    };
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      console.log(this.info.carPayNo);

      spuInfoByCarPayNo(this.info.carPayNo).then((response) => {
        if (response.code == 200) {
          let list = response.data;
          console.log(list);
          if (list.length > 0) {
            const newData = [];
            list.forEach((item) => {
              console.log(JSON.parse(item.goodsInfo));
              let goos = JSON.parse(item.goodsInfo);
              if (goos) {
                newData.push({
                  ...item,
                  ...goos[0],
                });
              }
            });
            this.spuList = newData;
            this.loading = false;
          } else {
            this.spuList = [];
            this.loading = false;
          }
        } else {
          this.spuList = [];
          this.loading = false;
        }
      });
    },
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    submit() {
      if (this.ids.length < 1) {
        this.$message({
          type: "error",
          message: "请选择要添加的店铺！",
        });
        return;
      }
      this.$confirm("是否确认添加所选店铺为连锁店?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          storeMultipleShopSave({ multipleShopIds: this.ids.toString() }).then(
            (res) => {
              console.log(res);
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.closeDialog();
                this.$emit("submit", true);
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    openDialog(record) {
      this.info = record;
      this.getList();
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
