<template>
  <div class="store-base-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="3">
        <el-button
          v-show="false"
          icon="el-icon-plus"
          type="primary"
        >
          {{ __('导入店铺') }}
        </el-button>
        <el-button
          v-show="selectRows.length > 0"
          icon="el-icon-plus"
          type="primary"
          @click="exportCsv"
        >
          {{ __('导出打印') }}
        </el-button>
        <el-button icon="el-icon-plus" type="primary" @click="handleEdit()">
          {{ __('添加') }}
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="21">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-select
              v-if="false"
              v-model.trim="queryForm.store_state_id"
              clearable
              :placeholder="__('审核状态')"
              style="margin-left: 5px; width: 120px"
            >
              <el-option
                v-for="item in storeState"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-radio-group v-model="queryForm.store_state_id" @change="queryData">
              <el-radio-button v-for="item in storeState" :key="item.value" :label="item.value" >{{item.label}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <Area v-model="queryArea" :clearable="true" style="width: 180px" />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model.trim="queryForm.store_name"
              clearable
              :placeholder="__('店铺名称')"
              style="margin-left: 0px; width: 100px"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model.trim="queryForm.store_grade_id"
              clearable
              :placeholder="__('等级')"
              style="margin-left: 0px; width: 74px"
            >
              <el-option
                v-for="item in options"
                :key="item.store_grade_id"
                :label="item.store_grade_name"
                :value="item.store_grade_id"
              />
            </el-select>
          </el-form-item>

          <el-form-item v-if="false">
            <el-select
              v-model.trim="queryForm.store_type"
              clearable
              :placeholder="__('零售商')"
              style="margin-left: 0px; width: 74px"
            >
              <el-option
                v-for="item in typeList"
                :key="item.store_type"
                :label="item.label"
                :value="item.store_type"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select
              v-model.trim="queryForm.store_is_selfsupport"
              clearable
              :placeholder="__('种类')"
              style="margin-left: 0px; width: 74px"
            >
              <el-option
                v-for="item in storeList"
                :key="item.store_is_selfsupport"
                :label="item.label"
                :value="item.store_is_selfsupport"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select
              v-model.trim="queryForm.subsite_id"
              clearable
              :placeholder="__('分站')"
              style="margin-left: 0px; width: 74px"
            >
              <el-option
                v-for="item in siteOptions"
                :key="item.subsite_id"
                :label="item.subsite_name"
                :value="item.subsite_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              {{ __('查询') }}
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      ref="table"
      v-loading="listLoading"
      border
      :data="list"
      :height="tableConfig.height"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        fixed
        show-overflow-tooltip
        type="selection"
      />
      <el-table-column
        align="center"
        fixed="left"
        :label="__('操作')"
        width="240px"
      >
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">
            {{ __('编辑') }}
          </el-button>
          <el-button
            :disabled="row.store_state_id === 3240"
            type="text"
            @click="handleSetCategoryState(row)"
          >
            {{ __('审核') }}
          </el-button>
          <el-button type="text" @click="handleDetailEdit(row)">
            {{ __('公司') }}
          </el-button>
          <el-button type="text" @click="handleSetCategory(row)">
            {{ __('类目') }}
          </el-button>
          <el-button type="text" @click="handleLocationEdit(row)">
            {{ __('位置') }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="left"
        :label="__('店铺编号')"
        prop="store_id"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="__('店铺徽标')"
        prop="store_logo"
        show-overflow-tooltip
        width="100"
      >
        <template slot-scope="scope">
          <el-image
            v-show="scope.row.store_logo"
            :preview-src-list="[scope.row.store_logo]"
            :src="scope.row.store_logo"
            style="width: 35px; height: 35px"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="__('店铺名称')"
        prop="store_name"
        show-overflow-tooltip
        width="150"
      />

      <el-table-column
        align="center"
        :label="__('开启状态')"
        prop="store_is_open"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.store_is_open"

            :active-value="1"

            :inactive-value="0"
            @change="sChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="__('店铺等级')"
        prop="store_grade_name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :formatter="formatSelfsupport"
        :label="__('是否自营')"
        prop="store_is_selfsupport"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-tag :type='({"0":"warning","1":"success","2":"info"})[row.store_is_selfsupport]'>
            {{ ({"0":"加盟","1":"自营","2":"加盟"})[row.store_is_selfsupport] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :formatter="formatFlag"
        :label="__('店铺类型')"
        prop="store_o2o_flag"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-tag :type='({"0":"success","1":"warning","2":"info"})[row.store_o2o_flag]'>
            {{ ({"0":"线上店铺","1":"线下门店","2":"线上店铺"})[row.store_o2o_flag] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :formatter="formatType"
        :label="__('店铺类型')"
        prop="store_type"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-tag :type='({"0":"warning","1":"success","2":"info"})[row.store_type]'>
            {{ ({"0":"供应商","1":"零售商","2":"供应商"})[row.store_type] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="__('店铺分类名称')"
        prop="store_category_name"
        show-overflow-tooltip
        width="130px"
      />
      <el-table-column
        align="center"
        :formatter="formatStateId"
        :label="__('店铺资料信息状态')"
        prop="store_state_id"
        show-overflow-tooltip
        width="150px"
      />
      <el-table-column
        v-if="false"
        align="center"
        :label="__('分站编号')"
        prop="subsite_id"
        show-overflow-tooltip
        width="100px"
      />
      <el-table-column
        align="center"
        :label="__('所属分站')"
        prop="subsite_name"
        show-overflow-tooltip
        width="100px"
      />
      <el-table-column
        align="center"
        :formatter="formatStoreTime"
        :label="__('加入时间')"
        prop="store_time"
        show-overflow-tooltip
        width="160px"
      />
      <el-table-column
        align="center"
        :formatter="formatTime"
        :label="__('有效期至')"
        prop="store_end_time"
        show-overflow-tooltip
        width="160px"
      />

      <el-table-column
        align="center"
        :label="__('用户编号')"
        prop="user_id"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="__('用户名')"
        prop="user_account"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        align="center"
        :label="__('用户昵称')"
        prop="user_nickname"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        align="center"
        :label="__('交易额 ')"
        prop="store_trade_amount"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="__('店铺收藏量')"
        prop="store_favorite_num"
        show-overflow-tooltip
        width="100px"
      />
      <el-table-column
        align="center"
        :label="__('产品数量')"
        prop="store_product_num"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="__('销售量')"
        prop="store_sales_num"
        show-overflow-tooltip
      />

      <el-table-column
        align="center"
        :label="__('评价次数')"
        prop="store_evaluation_num"
        show-overflow-tooltip
      />

      <el-table-column
        align="center"
        :label="__('好评率')"
        prop="store_evaluation_rate"
        show-overflow-tooltip
      />
    </el-table>

    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <edit ref="edit" @fetch-data="fetchData" />
    <location-edit ref="locationEdit" @fetch-data="fetchData" />
    <detail ref="detail" @fetch-data="fetchData" />
    <setState ref="setState" @fetch-data="fetchData" />
    <SetCategory ref="SetCategory" />
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { enable, FindStoreLevel, getList, exportFile } from '@/api/store/base'
  import { renderTime } from '@/utils/date'

  import Edit from './components/StoreBaseEdit'
  import SetCategory from './components/SetCategory'
  import Area from '@/components/VabArea/area'
  import VabQueryFormLeftPanel from '@/vab/components/VabQueryForm/components/VabQueryFormLeftPanel'
  import Detail from './components/StoreBaseDetailEdit'
  import setState from './components/setState'
  import LocationEdit from './components/LocationEdit'
  import {getList as getSubsite} from "@/api/plantform/subsite";

  export default {
    name: 'StoreBase',
    components: {
      VabQueryFormLeftPanel,
      Edit,
      LocationEdit,
      Area,
      Detail,
      SetCategory,
      setState,
    },
    data() {
      return {
        tableConfig: {
          height: window.innerHeight - 220 - 90,
        },
        selectRows: '',
        storeState: [
          {
            value: null,
            label: this.__('全部'),
          },
          {
            value: 3210,
            label: this.__('待完善'),
          },
          {
            value: 3220,
            label: this.__('待审核'),
          },
          {
            value: 3230,
            label: this.__('拒绝'),
          },
          {
            value: 3240,
            label: this.__('通过'),
          },
        ],
        value: '',
        typeList: [
          {
            store_type: 2,
            label: this.__('供应商'),
          },
          {
            store_type: 1,
            label: this.__('零售商家'),
          },
        ],
        store_type: 2,
        storeList: [
          {
            store_is_selfsupport: 1,
            label: this.__('自营'),
          },
          {
            store_is_selfsupport: 0,
            label: this.__('加盟'),
          },
        ],
        store_is_selfsupport: '',
        options: [],
        queryArea: {
          province: {},
          city: {},
          district: {},
        },
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          pageNum: 1,
          pageSize: 20,
          store_name: '',
          store_grade_id: undefined,
          store_state_id: null,
          store_type: 1,
          store_is_selfsupport: undefined,
        },
        siteOptions:[],
      }
    },
    created() {
      let query = this.$route.query
      if (query.store_state_id) {
        this.queryForm.store_state_id = Number(query.store_state_id)
      }
      this.queryData()
      this.fetchdataFindStoreLevel()
      this.getSubsiteList()
    },
    methods: {
      __,
      refresh() {
        this.queryArea = {
          province: {},
          city: {},
          district: {},
        }
        this.queryForm = {
          pageNum: 1,
          pageSize: 20,
          store_name: '',
          store_grade_id: undefined,
          store_state_id: undefined,
          store_type: 1,
          store_is_selfsupport: undefined,
        }
        this.fetchData()
      },
      formatTime(row) {
        return renderTime(row.store_end_time)
      },
      formatStoreTime(row) {
        return renderTime(row.store_time)
      },
      handleSetCategoryState(row) {
        this.$refs['setState'].showEdit(row)
      },
      async handleSetCategory(row) {
        this.$refs['SetCategory'].showTable(row)
      },
      async sChange(row) {
        const param = {
          store_id: row.store_id,
          store_is_open: row.store_is_open,
          enable_name: 'store_is_open',
          enable_id: 'store_id',
        }
        const { msg, status } = await enable(param)
        this.$baseMessage(msg, 'success', false, 'vab-hey-message-success')
      },
      formatStateId(row) {
        return row.store_state_id === 3210
          ? this.__('待完善资料')
          : row.store_state_id === 3220
          ? this.__('等待审核')
          : row.store_state_id === 3230
          ? this.__('资料审核没有通过')
          : this.__('资料审核通过')
      },
      formatSelfsupport(row) {
        return row.store_is_selfsupport === 1
          ? this.__('自营')
          : this.__('加盟')
      },
      formatFlag(row) {
        return row.store_o2o_flag === 1
          ? this.__('线下门店')
          : this.__('线上门店')
      },
      formatType(row) {
        return row.store_type === 2 ? this.__('供应商') : this.__('零售商')
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      handleDetailEdit(row) {
        this.$refs['detail'].showEdit(row)
      },
      handleEdit(row) {
        if (row) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleLocationEdit(row) {
        if (row) {
          this.$refs['locationEdit'].showEdit(row)
        } else {
          this.$refs['locationEdit'].showEdit()
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNum = 1
        this.fetchData()
      },
      async fetchdataFindStoreLevel() {
        await FindStoreLevel()
          .then((res) => {
            this.options = res.data
          })
          .catch((err) => {
            console.log(err)
          })
      },
      setAddress() {
        const province = this.queryArea.province
        const city = this.queryArea.city
        const district = this.queryArea.district
        if (
          province.name != undefined &&
          city.name != undefined &&
          district.name != undefined
        ) {
          this.queryForm.store_area =
            province.name + '/' + city.name + '/' + district.name
        } else if (
          province.name != undefined &&
          city.name == undefined &&
          district.name == undefined
        ) {
          this.queryForm.store_area = province.name
        } else if (
          province.name != undefined &&
          city.name != undefined &&
          district.name == undefined
        ) {
          this.queryForm.store_area = province.name + '/' + city.name
        } else {
          this.queryForm.store_area = ''
        }
      },
      async fetchData() {
        this.listLoading = true
        this.setAddress()
        const { data } = await getList(this.queryForm)
        this.list = data.items
        this.total = data.records
        this.listLoading = false
      },
      exportCsv() {
        const rows = this.$refs.table.selection
        if (!rows || rows.length <= 0) {
          this.$baseMessage('没有选中的数据！', 'error')
          return
        }
        let store_ids = rows.map((item) => item.store_id)
        exportFile({ store_ids: store_ids.toString() }).then((data) => {
          const blob = new Blob([data])
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = decodeURIComponent('店铺数据.csv') //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
      },
      async getSubsiteList() {
        let param = {
          pageNum: 1,
          pageSize: 9999,
        }
        const { data } = await getSubsite(param)
        if (data) {
          this.siteOptions = data.items
        } else {
          this.siteOptions = []
        }
      },
    },
  }
</script>

<style lang="scss" scoped>

::v-deep {
  .clearfix {
    font-size: 13px!important;
  }
}
</style>
