<template>
  <div class="project-backGoodShow" v-loading="loading">
    <div
      v-for="(item, index) in allList"
      :key="item.title + index"
      class="project-backGoodShow-main"
    >
      <div class="project-backGoodShow-title">商品要求{{ index + 1 }}</div>
      <div class="project-backGoodShow-ask-table">
        <template v-if="item.ladder">
          <el-table :data="item.ladder" :size="'mini'" border stripe style="width: 100%">
            <el-table-column prop="good_type" label="商品类型" width="80px">
              <template slot-scope="scope">
                <el-tag
                  :size="'mini'"
                  v-text="
                    (
                      statusOptions.find((item) => item.value == scope.row.good_type) ||
                      {}
                    ).label || '--'
                  "
                ></el-tag
              ></template>
            </el-table-column>
            <el-table-column prop="budget_price" label="预算单价" width="110" />
            <el-table-column prop="num" label="购买数量" width="110" />
            <el-table-column prop="cat_name" label="商品分类" />
            <el-table-column prop="good_img" label="图片" width="50">
              <template slot-scope="scope">
                <div
                  v-if="scope.row.good_img"
                  style="width: 20px; height: 20px"
                  class="hover"
                  v-viewer
                >
                  <img
                    :src="scope.row.good_img"
                    style="display: inline-block; width: 100%; height: 100%"
                    alt=""
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="good_name" label="商品名称" />
          </el-table>
        </template>
      </div>
      <div class="project-backGoodShow-title">
        商品反馈情况
        <el-tooltip
          effect="dark"
          class="fr"
          v-if="ppowers.some((i) => i == '1') && (status === '1' || status === '2')"
          content="添加线上商品"
          style="margin: 16px 10px 0 0"
          placement="top"
        >
          <i class="el-icon-zoom-in tb-icon" @click="addId(index)"></i>
        </el-tooltip>
      </div>
      <div class="project-backGoodShow-backGood-table">
        <template v-if="item.tableData">
          <el-table
            v-loading="item.loading"
            ref="multipleTable"
            :data="item.tableData"
            style="width: 100%; margin-bottom: 10px"
            row-key="id"
            border
            stripe
            :size="'mini'"
            @selection-change="handleSelectionChange($event)"
          >
            <el-table-column
              prop="pgNo"
              label="商品要求编码"
              min-width="156px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="sale_price"
              label="销售单价"
              min-width="110px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="num"
              label="购买数量"
              min-width="90px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="good_img"
              label="商品图片"
              min-width="242px"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div v-if="scope.row.good_img && scope.row.good_img.length > 0">
                  <img
                    v-for="(si, sii) in scope.row.good_img"
                    :key="si + sii"
                    :src="si"
                    class="hover fl"
                    style="
                      display: inline-block;
                      width: 20px;
                      height: 20px;
                      margin: 0 2px 0 0;
                    "
                    alt=""
                    v-viewer
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="good_name"
              label="商品名称"
              min-width="200px"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.row.good_name }}</span>
                <span v-for="(si, sii) in scope.row.specinfo" :key="si.id + sii">
                  {{ sii === 0 ? "_" : "-" }}{{ si.spec_name }}[{{ si.spec_value_name }}]
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="class_cat"
              label="商品分类"
              min-width="110px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="source"
              label="商品来源"
              min-width="90px"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag
                  :size="'mini'"
                  :type="scope.row.data_source === '1' ? 'success' : ''"
                  >{{ scope.row.data_source === "1" ? "平台商品" : "采反商品" }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="expire_day"
              label="信息有效期"
              min-width="85px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="work_day"
              label="制作工期"
              min-width="70px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="delivery_day"
              label="物流时间"
              min-width="70px"
              show-overflow-tooltip
            />
            <el-table-column
              prop="creater"
              label="负责人"
              min-width="60px"
              show-overflow-tooltip
            />
            <el-table-column
              label="操作"
              width="80px"
              show-overflow-tooltip
              fixed="right"
            >
              <template slot-scope="scope">
                <el-tooltip
                  v-if="powers.some((i) => i == '007')"
                  effect="dark"
                  content="详情"
                  placement="top"
                >
                  <i class="el-icon-view tb-icon" @click="show_view(scope.row)"></i>
                </el-tooltip>
                <el-tooltip
                  effect="dark"
                  content="删除"
                  placement="top"
                  v-if="scope.row.data_source === '1' && status === '2'"
                >
                  <i
                    class="el-icon-delete tb-icon"
                    @click="deleteId(scope.row.id, index)"
                  ></i>
                </el-tooltip> </template
            ></el-table-column>
          </el-table>
          <div v-if="item.tableData" class="Pagination" style="text-align: right">
            <el-pagination
              :current-page="item.pageInfo.curr"
              :page-size="item.pageInfo.size"
              :size="'mini'"
              layout="total,  prev, pager, next, jumper"
              :total="item.pageInfo.total"
              @size-change="handleSizeChange($event, index)"
              @current-change="handlePageChange($event, index)"
            />
          </div>
        </template>
        <!-- <template v-if="item.tableData">
          <ex-table
            v-loading="item.loading"
            :table="table"
            :data="item.tableData"
            :columns="columns"
            :page="item.pageInfo"
            :size="'mini'"
            @page-curr-change="handlePageChange($event, index)"
            @page-size-change="handleSizeChange($event, index)"
            @screen-reset="
              item.pageInfo.curr = 1;
              item.page = 1;
              searchList(index);
            "
            @screen-submit="
              item.pageInfo.curr = 1;
              item.page = 1;
              searchList(index);
            "
          >
            <template #good_img="{ scope }">
              <div
                v-if="scope.row.good_img&&scope.row.data_source === '1'"
                style="width: 20px; height: 20px"
                class="hover"
                v-viewer
              >
                <img
                  :src="scope.row.good_img"
                  style="display: inline-block; width: 100%; height: 100%"
                  alt=""
                />
              </div>
            </template>
            <template #good_name="{ scope }">
              <span>{{ scope.row.good_name }}</span>
              <span v-for="(si, sii) in scope.row.specinfo" :key="si.id + sii">
                {{ sii === 0 ? "_" : "-" }}{{ si.spec_name }}[{{
                  si.spec_value_name
                }}]
              </span>
            </template>

            <template #source="{ scope }">
              <el-tag
                :size="'mini'"
                :type="scope.row.data_source === '1' ? 'success' : ''"
                >{{
                  scope.row.data_source === "1" ? "平台商品" : "采反商品"
                }}</el-tag
              >
            </template>

            <template #operation="{ scope }">
              <el-tooltip
                v-if="powers.some((i) => i == '007')"
                effect="dark"
                content="详情"
                placement="top"
              >
                <i
                  class="el-icon-view tb-icon"
                  @click="show_view(scope.row)"
                ></i>
              </el-tooltip>
              <el-tooltip
                effect="dark"
                content="删除"
                placement="top"
                v-if="scope.row.data_source === '1' && status === '2'"
              >
                <i
                  class="el-icon-delete tb-icon"
                  @click="deleteId(scope.row.id, index)"
                ></i>
              </el-tooltip>
            </template>
          </ex-table>
        </template> -->
      </div>
    </div>
    <search-good-online-table-modal
      :showModel="showModel"
      :sitem="searchItem"
      @cancel="showModel = false"
      @submitRes="resetFormData"
    />

    <show-goods-data-table-modal
      :showModel="visible"
      :type="row.data_type_source"
      :title="row.dtitle"
      :skuCode="row.skuCode"
      :spuCode="row.spuCode"
      :iscgd="row.iscgd"
      @cancel="visible = false"
    />
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/sellOut/project";
import resToken from "@/mixins/resToken";
import columnsForm from "./columnsForm";
import searchGoodOnlineTableModal from "./search-good-online-table-modal";
import showGoodsDataTableModal from "@/components/show-goods-data-table-modal";
export default {
  name: "backGoodShow",
  props: ["showModel", "sitem", "id", "type", " newTime"],
  mixins: [resToken],
  components: {
    searchGoodOnlineTableModal,
    showGoodsDataTableModal,
  },
  computed: {
    powers() {
      const tran =
        this.$store.getters.btnList.find((item) => item.menu_route == "projectDetail") ||
        {};
      const { action } = tran ?? {};
      return action ?? [];
    },
    ppowers() {
      const tran =
        this.$store.getters.roleProcess.find((i) => i.process_type === "PRO") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  watch: {
    // showModel: function (val) {
    //   this.showModelThis = val;
    //   if (val) {
    //     this.initForm();
    //   }
    // },
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  data() {
    return {
      row: {},
      visible: false,
      showModel: false,
      searchItem: {},
      loading: false,
      allList: [],
      status: "",
      projectNo: "",
      statusOptions: [
        { value: "1", label: "竞品" },
        { value: "2", label: "竞聘" },
      ],
      table: {
        stripe: true,
        border: true,
        // _defaultHeader_: ["setcol"],
      },
      // 表格 - 列参数
      columns: columnsForm,
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    show_view(keyRow) {
      const { data_source } = keyRow;
      this.row = keyRow;
      if (data_source == 2) {
        this.row.data_type_source = "3";
        this.row.dtitle = "采返商品详情";
        this.row.iscgd = true;
      } else {
        this.row.data_type_source = "1";
        this.row.dtitle = "平台商品详情";
        this.row.iscgd = false;
      }
      this.visible = true;
    },
    //初始化整个组件
    async initForm() {
      this.loading = true;
      await this.initListData();
      this.loading = false;
      // console.log(this.allList);
      await this.allSearchList();
    },
    async resetFormData(index) {
      this.allList[index].pageInfo = {
        size: 10,
        curr: 1,
        total: 0,
      };
      this.allList[index].loading = true;
      this.allList[index].tableData = [];
      await this.searchList(index);
    },
    //初始化整个组件
    async initListData() {
      this.allList = [];
      const { projectNo, ladder, status } = this.sitem;
      this.status = status;
      console.log(this.status);
      this.projectNo = projectNo;
      if (ladder && ladder.length > 0) {
        ladder.forEach((e) => {
          let item = JSON.parse(JSON.stringify(e));
          // console.log(item);
          let model = {
            ladder: [item],
            pageInfo: {
              size: 10,
              curr: 1,
              total: 0,
            },
            pgNo: item.pgNo,
            loading: false,
            tableData: [],
          };
          if (model.ladder && model.ladder.length > 0) {
            model.ladder.forEach((a) => {
              if (a.cat_info && a.cat_info.length > 0) {
                a.cat_name = "";
                a.cat_info.forEach((b, bi) => {
                  a.cat_name += `${bi !== 0 ? "_" : ""}${b.name}`;
                });
              }
            });
          }
          this.allList.push(model);
        });
      }
    },
    async allSearchList() {
      if (this.allList && this.allList.length > 0) {
        this.allList.forEach(async (e, i) => {
          await this.searchList(i);
        });
      }
    },
    //页数选择
    async handlePageChange(e, index) {
      this.allList[index].pageInfo.curr = e;
      await this.searchList(index);
    },
    //页面条数选择
    async handleSizeChange(e, index) {
      this.allList[index].pageInfo.curr = 1;
      this.allList[index].pageInfo.size = e;
      await this.searchList(index);
    },
    async searchList(index) {
      const { pageInfo, pgNo } = this.allList[index];
      const { size, curr } = pageInfo;
      this.allList[index].loading = true;
      let model = {
        page: curr,
        size: size,
        zxNo: "",
        infoNo: "",
        bidNo: "",
        pgNo: pgNo,
        projectNo: this.projectNo,
      };
      const { code, data } = await asyncRequest.back_good_list(model);
      if (code === 0) {
        const { list, count } = data;
        this.allList[index].tableData = list;
        this.allList[index].tableData.map((v) => {
          v.class_cat = "";
          if (v.can && v.can.length > 0) {
            v.can.forEach((x, i) => {
              v.class_cat += i === 0 ? x.name : "_" + x.name;
            });
          }
          v.model = "";
          if (v.specinfo && v.specinfo.length > 0) {
            v.specinfo.forEach((y, yi) => {
              v.model += `${yi !== 0 ? "--" : ""}${y.spec_name}[${y.spec_value_name}]`;
            });
          }
          if (v.good_img) {
            v.good_img =
              Object.prototype.toString.call(v.good_img) === "[object Array]"
                ? v.good_img
                : (v.good_img || "").split(",");
          }
          return v;
        });
        this.allList[index].pageInfo.total = Number(count);
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.allList[index].tableData = [];
        this.allList[index].pageInfo.total = 0;
      }
      this.allList[index].loading = false;
    },
    addId(index) {
      let ladder = JSON.parse(JSON.stringify(this.allList[index].ladder));
      this.searchItem = ladder[0];
      this.searchItem.platform_code = this.sitem.platform_code;
      this.searchItem.platform_id = this.sitem.platform_id;
      this.searchItem.platform_name = this.sitem.platform_name;
      this.searchItem.company = this.sitem.company;
      this.searchItem.companyNo = this.sitem.companyNo;
      this.searchItem.pgNo_index = index;
      this.showModel = true;
    },
    async deleteId(id, index) {
      await this.$confirm("确定要删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const model = {
            id: [id],
          };
          const res = await asyncRequest.project_online_good_del(model);
          if (res && res.code === 0) {
            this.$notify.success({
              title: "删除成功",
              message: "",
            });
            this.searchList(index);
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.project-backGoodShow {
  box-sizing: border-box;
  width: 100%;

  .project-backGoodShow-main {
    padding: 2px 16px 16px 16px;
    // background: #fefefe;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    margin: 0 0 16px 0;
    .project-backGoodShow-title {
      height: 48px;
      line-height: 48px;
      color: #676767;
    }
  }
}
/deep/ .el-dialog {
  width: 1024px;
}
</style>
