<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <ele-split-layout
        width="210px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div>
          <div class="ele-border-lighter sys-organization-list">
            <AssetTree
              @handleNodeClick="handleNodeClick"
              id="1789827921908150274"
              :isIds="false"
              :isFirstRefreshTable="false"
              ref="treeList"
            />
          </div>
        </div>
        <template v-slot:content>
          <div
            class="ele-border-lighter form-content"
            v-loading="loading"
          ></div>
          <PriceSearch @search="reload"> </PriceSearch>
          <!-- 数据表格 -->
          <ele-pro-table
            ref="table"
            :columns="columns"
            :datasource="datasource"
            height="calc(100vh - 325px)"
            full-height="calc(100vh - 116px)"
            tool-class="ele-toolbar-form"
            :page-size="20"
            :selection.sync="selection"
            @columns-change="handleColumnChange"
            :cache-key="cacheKeyUrl"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                class="ele-btn-icon"
                @click="openEdit('add')"
              >
                新建
              </el-button>
              <el-button
                size="small"
                type="danger"
                el-icon-delete
                class="ele-btn-icon"
                @click="allDelBtn"
                :disabled="selection?.length === 0"
              >
                批量删除
              </el-button>
            </template>

            <!-- 展开列 -->
            <template v-slot:expand="{ row }">
              <el-form
                v-for="item in row.goodsPriceList"
                :key="item.id"
                label-width="100px"
                class="el-form-box"
              >
                <el-row class="price-info">
                  <el-col :span="3"
                    ><el-form-item label="价格类型：">
                      {{ getDictValue('商品价格类型', item.priceType) }}
                    </el-form-item></el-col
                  >
                  <el-col :span="3"
                    ><el-form-item label="含税单价：">{{
                      item.unitPrice
                    }}</el-form-item></el-col
                  >
                  <el-col :span="3"
                    ><el-form-item label="税率："
                      >{{ item.taxRate }}%</el-form-item
                    ></el-col
                  >
                  <el-col :span="3"
                    ><el-form-item label="不含税单价：">{{
                      item.excludeTaxPrice
                    }}</el-form-item></el-col
                  >
                  <el-col :span="3" v-show="row.goodsStatus === 0"
                    ><el-link
                      @click="openEditPrice(item)"
                      type="primary"
                      :underline="false"
                      icon="el-icon-sort-edit"
                    >
                      修改
                    </el-link></el-col
                  >
                  <el-col :span="3"
                    ><el-link
                      @click="openHistoricalprice(item)"
                      type="primary"
                      :underline="false"
                      icon="el-icon-sort-edit"
                    >
                      历史价格
                    </el-link></el-col
                  >
                </el-row>
              </el-form>
            </template>
            <!-- 列详情 -->
            <template v-slot:goodsName="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="openEdit('view', row)"
              >
                {{ row.goodsName }}</el-link
              >
            </template>

            <!-- 商品图片 -->
            <template v-slot:imagesPaths="{ row }">
              <el-image
                v-if="row.imagesPaths"
                style="width: 50px; height: 50px"
                fit="cover"
                :src="
                  locationUrl +
                  '/api/main/file/getFile?objectName=' +
                  row.imagesPaths.split(',')[0]
                "
                :preview-src-list="
                  row.imagesPaths
                    .split(',')
                    .map(
                      (url) =>
                        locationUrl + '/api/main/file/getFile?objectName=' + url
                    )
                "
              />
            </template>

            <!-- 操作列 -->
            <template v-slot:action="{ row }">
              <el-link
                @click="submit(row)"
                v-if="
                  row.goodsStatus == 0 && [0, 3].includes(row.approvalStatus)
                "
                type="primary"
                :underline="false"
                icon="el-icon-sort-up"
              >
                上架
              </el-link>
              <el-link
                @click="editGoodsStatus(row)"
                type="primary"
                :underline="false"
                icon="el-icon-sort-down"
                v-if="row.goodsStatus != 0"
              >
                下架
              </el-link>
              <el-link
                @click="openEditGoodsInfo(row)"
                type="primary"
                :underline="false"
                v-if="
                  row.goodsStatus == 0 && [0, 3].includes(row.approvalStatus)
                "
              >
                修改
              </el-link>
              <el-popconfirm
                class="ele-action"
                title="确定要删除此信息吗？"
                @confirm="commitBtn([row.id])"
                v-if="
                  row.goodsStatus == 0 && [0, 3].includes(row.approvalStatus)
                "
              >
                <template v-slot:reference>
                  <el-link type="danger" :underline="false"> 删除 </el-link>
                </template>
              </el-popconfirm>
            </template>
          </ele-pro-table>
        </template>
      </ele-split-layout>
    </el-card>
    <process-submit-dialog
      :isNotNeedProcess="false"
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
    ></process-submit-dialog>
    <AddDialog ref="addContactDialogRef" @done="reload"></AddDialog>
    <EditPriceDialog ref="editPriceDialogRef" @done="reload"> </EditPriceDialog>
    <HistoricalpriceDialog
      ref="historicalpriceDialogRef"
      @done="reload"
    ></HistoricalpriceDialog>
  </div>
</template>

<script>
  import HistoricalpriceDialog from './components/historicalpriceDialog.vue';
  import EditPriceDialog from './components/editPriceDialog.vue';
  import AssetTree from '@/components/AssetTree';
  import PriceSearch from './components/priceSearch.vue';
  import AddDialog from './components/addDialog.vue';
  import tabMixins from '@/mixins/tableColumnsMixin';
  import { getList, del, offOnSheft } from '@/api/goodsManage/index';
  import dictMixins from '@/mixins/dictMixins';
  import processSubmitDialog from '@/BIZComponents/processSubmitDialog/processSubmitDialog.vue';
  import { reviewStatus } from '@/enum/dict';
  import { mapGetters } from 'vuex';

  export default {
    mixins: [tabMixins, dictMixins],
    components: {
      AssetTree,
      PriceSearch,
      AddDialog,
      EditPriceDialog,
      HistoricalpriceDialog,
      processSubmitDialog
    },
    data() {
      return {
        locationUrl: window.location.origin,
        loading: false,
        processSubmitDialogFlag: false,
        cacheKeyUrl: 'eos-01283c34-commodityManagement-commodityPriceList',
        // 表格列配置
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            selectable: (row) => {
              return row.goodsStatus == 0;
            }
          },
          {
            width: 45,
            type: 'expand',
            columnKey: 'expand',
            align: 'center',
            slot: 'expand'
          },
          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            showOverflowTooltip: true,
            label: '序号'
          },
          {
            prop: 'goodsCode',
            label: '商品编码',
            align: 'center',
            showOverflowTooltip: true,
            sortable: true,
            width: 180
          },
          {
            prop: 'imagesPaths',
            label: '商品图片',
            align: 'center',
            slot: 'imagesPaths',
            width: 180
          },
          {
            prop: 'goodsName',
            label: '商品名称',
            align: 'center',
            slot: 'goodsName',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'categoryLevelName',
            label: '商品分类',
            align: 'center',
            showOverflowTooltip: true,
            width: 180
          },
          {
            prop: 'categoryName',
            align: 'center',
            label: '产品名称',
            showOverflowTooltip: true,
            minWidth: 180
          },
          // {
          //   prop: '产品编码',
          //   label: '产品编码',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: '产品类型',
          //   label: '产品类型',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'priceType',
          //   label: '价格类型',
          //   slot: 'priceType',
          //   align: 'center',
          //   width: 120,
          //   formatter: (row, column) => {
          //     if (row.priceType) {
          //       return this.goodsTypeList.find((item) => item[row.priceType])?.[
          //         row.priceType
          //       ];
          //     }
          //   }
          // },
          // {
          //   prop: 'unitPrice',
          //   label: '含税单价',
          //   slot: 'unitPrice',
          //   align: 'center'
          // },
          // {
          //   prop: 'taxRate',
          //   slot: 'taxRate',
          //   label: '税率',
          //   align: 'center'
          // },
          // {
          //   prop: 'excludeTaxPrice',
          //   label: '不含税单价',
          //   slot: 'excludeTaxPrice',
          //   align: 'center'
          // },
          {
            prop: 'goodsStatus',
            align: 'center',
            width: 150,
            label: '状态',
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return row.goodsStatus === 0
                ? '下架'
                : row.goodsStatus === 1
                ? '上架'
                : '';
            }
          },
          {
            prop: 'approvalStatus',
            label: '审核状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return reviewStatus[_row.approvalStatus];
            }
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            width: 180
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 250,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
        selection: [],
        curNodeData: {} //右侧菜单选择对象
      };
    },
    created() {
      this.requestDict('商品价格类型');
    },
    computed: {
      ...mapGetters(['user'])
    },
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return getList({
          pageNum: page,
          size: limit,
          // goodsStatus:1,
          ...where
        });
      },
      openEditGoodsInfo(row) {
        this.openEdit('editGoodsInfo', row);
      },

      // handleCommand(command, row) {
      //   if (command === 'openEditGoodsInfo') {

      //   } else if (command === 'openHistoricalprice') {
      //     this.openEditPrice(row);
      //   } else if (command === 'del') {
      //     this.commitBtn([row.id]);
      //   }
      // },

      handleNodeClick(data, node) {
        this.curNodeData = data;
        this.reload({ categoryLevelId: data.id });
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      //历史价格
      openHistoricalprice(row) {
        this.$refs.historicalpriceDialogRef.open(row);
      },

      openEdit(type, row) {
        this.$refs.addContactDialogRef.open(type, row, this.curNodeData.id);
        this.$refs.addContactDialogRef.$refs.form &&
          this.$refs.addContactDialogRef.$refs.form.clearValidate();
      },

      openEditPrice(row) {
        this.$refs.editPriceDialogRef.open(row);
        this.$refs.editPriceDialogRef.$refs.form &&
          this.$refs.editPriceDialogRef.$refs.form.clearValidate();
      },

      async submit(res) {
        this.processSubmitDialogFlag = true;
        this.$nextTick(() => {
          let params = {
            businessId: res.id,
            businessKey: 'goods_manage_priceOffOnSheft_on',
            formCreateUserId: this.user.info.userId,
            variables: {
              businessCode: res.goodsCode,
              businessName: res.goodsName,
              businessType: res.categoryLevelName
            }
          };
          this.$refs.processSubmitDialogRef.init(params);
        });
      },

      //上架下架操作
      editGoodsStatus(row) {
        const data = {
          shelf_type: row.goodsStatus === 1 ? 'off' : 'on',
          goods_id: [row.id]
        };
        offOnSheft(data)
          .then((res) => {
            this.$message.success('操作成功！');
            this.reload();
          })
          .catch((error) => {});
      },

      //批量删除
      allDelBtn() {
        if (this.selection.length === 0) return;
        let flag = this.selection.some((item) =>
          [1].includes(item.goodsStatus)
        );
        if (flag)
          return this.$message.warning('抱歉已上架中的数据不能删除,请检查');
        this.commitBtn();
      },

      commitBtn(id) {
        const dataId = id || this.selection.map((v) => v.id);
        del(dataId)
          .then((res) => {
            this.$message.success('删除成功！');
            this.reload();
          })
          .catch((error) => {});
      }
    }
  };
</script>
<style lang="scss" scoped>
  :deep(.el-link--inner) {
    margin-left: 0px !important;
  }

  .sys-organization-list {
    height: calc(100vh - 225px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }

  .sys-organization-list :deep(.el-tree-node__content) {
    height: 40px;

    & > .el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }

  .el-dropdown-link {
    cursor: pointer;
    color: var(--color-primary-5);
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .price-info {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }
</style>
