<template>
  <div class="shop_page">
    <div class="toolbar">
      <el-form
        :inline="true"
        :model="formParams"
      >
        <el-form-item label="店铺名称">
          <el-input v-model="formParams.model.storeName" size="mini" />
        </el-form-item>

        <el-form-item label="店铺编码">
          <el-input v-model="formParams.model.tenantCode" size="mini" />
        </el-form-item>

        <el-form-item label="审核状态">
          <el-select
            v-model="formParams.model.status"
            size="mini"
          >
            <el-option
              v-for="(item, index) in statusList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="fetch"
          >
            查询
          </el-button>
          <el-button
            plain
            size="mini"
            @click="reset"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="content_table">
      <div class="table">
        <el-table
          :data="tableData.records"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="storeName"
            label="店铺名称"
          />
          <el-table-column
            prop="tenantCode"
            label="店铺编码"
          />
          <el-table-column
            prop="productCount"
            label="参与商品数"
          />
          <el-table-column
            prop="auditCount"
            label="审核次数"
          />
          <el-table-column
            prop="status"
            :formatter="getStatus"
            label="审核状态"
          />
          <el-table-column label="操作">
            <template
              slot-scope="scope"
            >
              <el-button
                type="text"
                size="small"
                @click.native.prevent="details(scope.row)"
              >
                查看商品
              </el-button>
              <el-button
                type="text"
                size="small"
                @click.native.prevent="records(scope.row)"
              >
                审核记录
              </el-button>
              <el-button
                v-if="scope.row.status===1"
                type="text"
                size="small"
                @click.native.prevent="audit(scope.row.id)"
              >
                审核
              </el-button>
              <el-button
                v-if="scope.row.status===2"
                type="text"
                size="small"
                @click.native.prevent="clean(scope.row.id)"
              >
                清退
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="tableData.total > 0"
        :limit.sync="formParams.size"
        :page.sync="formParams.current"
        :total="Number(tableData.total)"
        @pagination="fetch"
      />
    </div>

    <Dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      :fullscreen="!true"
      :before-close="close"
      width="55%"
    >
      <goods v-if="dialog.type===1" :info="info" />
      <audit-log v-if="dialog.type===2" :info="info" />
    </Dialog>
    <auditDialog :dialog-data="dialogData" @closed="closed" @applyShop="applyShop" />
  </div>
</template>

<script>
import Marketing from '@/api/Marketing'
import Pagination from '@/components/Pagination'
import goods from './component/goods'
import auditLog from './component/auditLog'
import auditDialog from './component/auditDialog'
import { Dialog } from 'element-ui'
export default {
  components: {
    Pagination,
    goods,
    Dialog,
    auditLog,
    auditDialog
  },
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formParams: {
        model: {
          storeName: '',
          tenantCode: '',
          status: 2,
          promotionId: this.params.id
        },
        size: 10,
        current: 1
      },
      statusList: [
        { label: '全部', value: '' },
        { label: '待审核', value: 1 },
        { label: '审核通过', value: 2 },
        { label: '审核不通过', value: 3 }
      ],
      tableData: {},
      dialog: {},
      info: '',
      dialogData: {}
    }
  },
  created() {
    this.applyShop()
  },
  methods: {
    async applyShop() {
      const res = await Marketing.applyShop(this.formParams)
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    getStatus(row, item, cellValue) {
      let t = ''
      this.statusList.forEach(item => {
        if (item.value === cellValue) {
          t = item.label
        }
      })
      return t
    },
    reset() {
      this.formParams = {
        model: {
          storeName: '',
          tenantCode: '',
          status: '',
          promotionId: this.params.id
        },
        size: 10,
        current: 1
      }
    },
    fetch() {
      this.applyShop()
    },
    details(item) {
      this.info = item
      this.dialog = {
        title: '活动商品',
        visible: true,
        type: 1
      }
    },
    records(item) {
      this.info = item
      this.dialog = {
        title: '审核记录',
        visible: true,
        type: 2
      }
    },
    audit(id) {
      this.dialogData = {
        title: '审核',
        type: 1,
        id: id,
        visible: true
      }
    },
    clean(id) {
      this.dialogData = {
        title: '清退',
        type: 2,
        id: id,
        visible: true
      }
    },
    close() {
      this.dialog = {
        title: '',
        visible: false,
        type: ''
      }
    },
    closed(v) {
      this.dialogData.visible = v
    }
  }
}
</script>

<style lang='less' scoped>
.shop_page {
  .content_table {
    .table {

    }
  }
}

/deep/ .el-table {
  th {
      background: #EEF3FF;
      color:#333333;
      font-size:16px;
      font-weight: 400;
      border-color: #E0E5EB;
      text-align: center;
  }
  td {
    font-size: 14px;
    text-align: center;
    color: #666666;
  }
}

/deep/ .el-dialog__wrapper {
  .el-dialog__header {
    height: 70px;
    background-color: #3A68F2;
    .el-dialog__title {
      font-size:24px;
      color: #fff;
    }
  }
}
</style>
