<template>
  <div class="showbackgood">
    <div class="slist-card">
      <div class="project-backGoodShow" v-loading="loading">
        <div class="project-backGoodShow-main">
          <div class="project-backGoodShow-title">商品要求</div>
          <div class="project-backGoodShow-ask-table">
            <template v-if="ladder">
              <el-table
                :data="ladder"
                :size="'mini'"
                border
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="pgNo"
                  label="商品要求编码"
                  width="160"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="good_type"
                  label="商品类型"
                  width="80px"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-tag
                      :size="'mini'"
                      v-text="
                        (
                          statusOptions.find(
                            (items) => items.value == scope.row.good_type
                          ) || {}
                        ).label || '--'
                      "
                    ></el-tag
                  ></template>
                </el-table-column>
                <el-table-column
                  prop="budget_price"
                  label="预算单价"
                  width="110"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="num"
                  label="购买数量"
                  width="110"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="cat_name"
                  label="商品分类"
                  min-width="110"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span
                      v-for="(si, sii) in scope.row.cat_info"
                      :key="si.id + sii"
                    >
                      {{ sii === 0 ? "" : "_" }}{{ si.name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="good_name"
                  label="商品名称"
                  min-width="150"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <img
                      v-if="scope.row.good_img"
                      class="hover fl"
                      v-viewer
                      :src="scope.row.good_img"
                      style="
                        display: inline-block;
                        width: 20px;
                        height: 20px;
                        margin: 2px 0 0 0;
                      "
                      alt=""
                    />
                    <span style="vertical-align: top; display: inline-block">{{
                      scope.row.good_name
                    }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <div class="project-backGoodShow-title">商品反馈情况</div>
          <div class="project-backGoodShow-backGood-table">
            <template>
              <ex-table
                v-loading="loading"
                :table="table"
                :data="tableData"
                :columns="columns"
                :page="pageInfo"
                :size="'mini'"
                @page-curr-change="handlePageChange($event)"
                @page-size-change="handleSizeChange($event)"
                @screen-reset="
                  pageInfo.curr = 1;
                  searchList();
                "
                @screen-submit="
                  pageInfo.curr = 1;
                  searchList();
                "
              >
                <template #good_name="{ scope }">
                  <img
                    v-if="scope.row.good_img"
                    class="fl hover"
                    v-viewer
                    :src="scope.row.good_img"
                    style="display: inline-block; width: 23px; height: 23px"
                    alt=""
                  />
                  <span>{{ scope.row.good_name }}</span
                  ><span v-for="(si, sii) in scope.row.can" :key="si.id + sii"
                    >{{ sii === 0 ? "_" : "-" }}{{ si.name }}</span
                  >
                </template>
              </ex-table>
            </template>
          </div>
          <div class="project-backGoodShow-title" v-if="total !== 0">
            <span class="fl">
              {{
                status === "5" || status === "6" ? "已选定方案" : "选择方案"
              }}</span
            >

            <el-button-group
              :size="'mini'"
              class="fr"
              v-if="status === '4'"
              style="margin: 8px 0 0 0"
            >
              <el-button
                class="fr"
                type="primary"
                :size="'mini'"
                :disabled="index === 0"
                v-if="total !== 0"
                icon="el-icon-arrow-left"
                @click="index--, change_plan()"
              ></el-button>
              <el-button
                type="primary"
                class="fr"
                v-if="total !== 0"
                :size="'mini'"
                style="height: 29px"
                >方案共{{ index + 1 }}/{{ total }}</el-button
              >
              <el-button
                type="primary"
                class="fr"
                v-if="total !== 0"
                :disabled="index + 1 === total"
                @click="index++, change_plan()"
                :size="'mini'"
                ><i
                  class="el-icon-arrow-right el-icon--right"
                  :size="'mini'"
                ></i
              ></el-button>
              <el-button
                type="primary"
                class="fr"
                v-if="total !== 0"
                @click="add_plan"
                icon="el-icon-circle-plus-outline"
                :size="'mini'"
                >选定方案,并提交
              </el-button>
            </el-button-group>
            <span
              v-if="plan_show"
              class="fl"
              style="font-size: 13px; color: #e4393c;padding:0 0 0 20px"
              >方案总金额：{{ plan_show.sale_total }}元</span
            >
          </div>
          <div
            class="project-setPlan-backGood-table"
            v-if="plan_show && plan_show.feedback && plan_show.feedback.length"
          >
            <el-table
              :data="plan_show.feedback"
              :size="'mini'"
              border
              stripe
              :ref="'multipleTable' + index"
              style="width: 100%"
            >
              <el-table-column
                prop="pgNo"
                label="要求编码"
                width="180px"
                show-overflow-tooltip
              />

              <el-table-column
                prop="sale_price"
                label="销售单价"
                width="110"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.sale_price }}元</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="num"
                label="购买数量"
                width="110"
                show-overflow-tooltip
              />
              <el-table-column
                prop="good_img"
                label="图片"
                width="50"
                show-overflow-tooltip
              >
                <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="商品名称"
                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="商品分类"
                width="200px"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span
                    v-for="(si, sii) in scope.row.cat_info"
                    :key="si.id + sii"
                    >{{ sii === 0 ? "" : "_" }}{{ si.name }}</span
                  >
                </template></el-table-column
              >
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { change_project_plan, back_good_list, get_project_plan } from "@/apis";
import columnsForm from "./columnsForm";
export default {
  name: "changeBackGood",
  props: ["showModel", "sitem", "id", "type", "newTime"],
  watch: {
    // showModel: function (val) {
    //   this.showModelThis = val;
    //   if (val) {
    //     this.initForm();
    //   }
    // },
    newTime(val) {
      this.initForm();
    },
  },
  data() {
    return {
      loading: false,
      allPlanList: [],
      index: 0,
      total: 0,
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      ladder: [],
      plan_table: [],
      tableData: [],
      projectNo: "",
      status: "",
      statusOptions: [
        { value: "1", label: "竞品" },
        { value: "2", label: "竞聘" },
      ],
      sitemStatusoptions: [
        { value: "1", label: "待商品反馈" },
        { value: "2", label: "待项目反馈商品选择" },
        { value: "3", label: "待项目方案制定" },
        { value: "4", label: "待方案选择" },
        { value: "5", label: "项目结束" },
      ],
      table: {
        stripe: true,
        border: true,
        // _defaultHeader_: ["setcol"],
      },
      // 表格 - 列参数
      columns: [],
      plan_show: {
        sale_total: "0",
        feedback: [],
      },
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    //初始化整个组件
    async initForm() {
      this.columns = [];
      this.loading = true;
      let list = JSON.parse(JSON.stringify(columnsForm));
      list.shift();
      this.columns = list;
      this.tableData = [];
      await this.initListData();
      await this.get_plan();
      // console.log(this.allList);
      this.loading = false;
      // console.log(this.allList);
    },
    async add_plan() {
      const { planNo, status } = JSON.parse(
        JSON.stringify(this.allPlanList[this.index])
      );
      if (status === "1") {
        this.$message.warning("该方案已选中！不能再选！");
        return;
      }
      await this.$confirm(`方案只能选择一次，您确定选定该方案么？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.loading = true;
          const model = {
            planNos: [planNo],
            status: "1",
          };
          model.full = this.$route.path;
          const res = await change_project_plan(model);
          if (res && res.code === 0) {
            this.loading = false;
            this.$notify.success({
              title: "方案选择成功！",
              message: "",
            });
            this.$emit("refresh");
          } else {
            this.loading = false;
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });

      // const { code, data } = await back_good_list(model);
      // if (code === 0) {
      //   const { list, count } = data;
      //   this.tableData = list;
      //   this.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((x, i) => {
      //         v.model += `${i !== 0 ? "--" : ""}${x.spec_name}[${
      //           x.spec_value_name
      //         }]`;
      //       });
      //     }
      //     return v;
      //   });
      //   this.pageInfo.total = Number(count);
      // }  else {
      //   this.tableData = [];
      //   this.pageInfo.total = 0;
      // }
      // change_project_plan
    },
    //初始化整个组件
    async initListData() {
      // console.log(this.sitem);
      this.allList = [];
      const { projectNo, ladder, status } = this.sitem;
      this.status = status;
      this.projectNo = projectNo;
      this.ladder = JSON.parse(JSON.stringify(ladder));
      this.tableData = [];
      await this.searchList();
    },
    //页数选择
    async handlePageChange(e) {
      this.pageInfo.curr = e;
      await this.searchList();
    },
    //页面条数选择
    async handleSizeChange(e) {
      this.pageInfo.curr = 1;
      this.pageInfo.size = e;
      await this.searchList();
    },
    async searchList() {
      const { size, curr } = this.pageInfo;
      this.loading = true;
      let model = {
        page: curr,
        size: size,
        zxNo: "",
        infoNo: "",
        bidNo: "",
        pgNo: "",
        status: "1",
        projectNo: this.projectNo,
      };
       model.full = this.$route.path;
      const { code, data } = await back_good_list(model);
      if (code === 0) {
        const { list, count } = data;
        this.tableData = list;
        this.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((x, i) => {
              v.model += `${i !== 0 ? "--" : ""}${x.spec_name}[${
                x.spec_value_name
              }]`;
            });
          }
          return v;
        });
        this.pageInfo.total = Number(count);
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },
    //获取全部方案
    async get_plan() {
      let model = {
        projectNo: this.projectNo,
        type: this.status === "5" || this.status === "6" ? "1" : "",
      };
      model.full = this.$route.path;
      const { code, data, message } = await get_project_plan(model);
      if (code === 0) {
        if (data.length > 0) {
          this.allPlanList = JSON.parse(JSON.stringify(data));
          this.total = this.allPlanList.length;
          this.index = 0;
          await this.change_plan("1");
        } else {
          this.allPlanList = [];
          this.total = 0;
          this.index = 0;
          this.plan_show = {
            sale_total: "0",
            feedback: [],
          };
        }
      } else {
        this.$message.warning(message);
      }
    },
    //切换当前展示的方案
    async change_plan(type) {
      this.plan_show = {
        sale_total: "0",
        feedback: [],
      };
      if (type) {
        this.index = 0;
      }
      const { sale_total, feedback } = JSON.parse(
        JSON.stringify(this.allPlanList[this.index])
      );
      this.plan_show = {
        sale_total: sale_total,
        feedback: JSON.parse(JSON.stringify(feedback)),
      };
      for (let i = 0; i < this.plan_show.feedback.length; i++) {
        this.$set(this.plan_show.feedback[i], i, this.plan_show.feedback[i]);
      }
      console.log(this.plan_show);
    },
  },
};
</script>

   <style lang="scss" scoped>
.showbackgood {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
  background: transparent;
  .slist-card {
    background: #fff;
    padding: 0 16px 16px 16px;
    margin: 16px 0 0 0;
    &:last-child {
      margin-bottom: 16px;
    }
  }
  // padding:16px;
  // border:1px solid #f2f2f2;

  .project-backGoodShow {
    box-sizing: border-box;
    width: 100%;
    // padding: 2px 16px 16px 16px;

    .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;
      }
    }
  }
}
</style>
