<template>
  <div class="yqshop-wrapper">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="yqshop-content screenSet" id="screenSet">
      <div class="header-title">云鹊店铺</div>
      <el-form ref="searchForm" :model="searchForm" label-width="80px" label-suffix=":" :inline="true">
        <el-row :gutter="30" type="flex" style="margin-top: 10px">
          <el-col :span="18">
            <el-form-item label="店铺名称">
              <el-input v-model="searchForm.storeName" size="small" placeholder="请输入店铺名称"></el-input>
            </el-form-item>
            <el-form-item label="店铺ID">
              <el-input v-model="searchForm.id" size="small" placeholder="请输入店铺ID"></el-input>
            </el-form-item>
            <el-form-item label="店铺类型">
              <el-select
                  v-model="searchForm.type"
                  placeholder="请选择店铺类型"
                  size="small"
                  clearable>
                <el-option
                    v-for="(item,index) in typeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button type="primary" size="small" @click="searchList">查询</el-button>
            <el-button type="default" size="small" @click="resetForm" style="margin-left:0;">重置</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right">
            <el-button type="primary" size="small" @click="createShop" :disabled="!canAdd">新建店铺</el-button>
            <!--<el-button type="primary" size="small" @click="createShop">新建店铺</el-button>-->
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableData" class="item-table" style="width: 100%;margin-top: 10px;">
        <el-table-column prop="id" label="店铺ID" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.tradeStore.id }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="storeName" label="店铺名称" min-width="100" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.tradeStore.storeName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="storeType" label="店铺类型" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.tradeStore.storeType | storeTypeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="storeStatus" label="店铺状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.tradeStore.storeStatus | statusFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="已上架商品数" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.tradeStore.count }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" min-width="100" align="center">
          <template slot-scope="scope">
            <!--<span>{{ scope.row.createdTime | liveDateFilter }}</span>-->
            <span>{{ scope.row.tradeStore.createdTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150" align="center" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-button @click="editShop(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="shopManage(scope.row)" type="text" size="small">店铺管理</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleNumChange"
            :current-page="searchForm.pageNo"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRows"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "@/components/breadcrumb.vue";
  import { queryStore, queryShopAuth } from '@/utils/shop';
  export default {
    components: {
      BreadCrumb
    },
    data(){
      return{
        curmbFirst: '云鹊店铺',
        showAllFlag: false,
        showNewFlag: false,
        searchForm: {
          storeName: '',
          storeId: 0,
          storeType: 0,
          pageNo: 1,
          pageSize: 10,
          id: null,
          type: null,
        },
        canAdd: false,
        totalRows: 0,
        tableData: [
        //   {
        //   tradeStore: {
        //     id: 12,
        //     storeName: '康爱多',
        //     storeType: 1,
        //     storeStatus: 0,
        //     count: 2,
        //     createdTime: ''
        //   }
        // }
        ],
        typeList: [
          {
          label: '供货商',
          value: 1,
        }, {
          label: '医生小店',
          value: 2,
        }, {
          label: '小药房',
          value: 3,
        }]
      }
    },
    created() {
      this.getAddAuth();
      this.searchList();
      localStorage.setItem('storeId', 0)
    },
    methods: {
      getAddAuth() {
        queryShopAuth().then(res => {
        //  0 表示超级管理员,大于0 表示小店或供应商,null 表示非法用户
          if (res.data == 0) {
            this.canAdd = true;
          }
        })
      },
      searchList() {
        openLoading(this);
        let params = this.searchForm;
        if (this.searchForm.id) {
          params.storeId = this.searchForm.id;
        }else {
          params.storeId = 0;
        }
        if (this.searchForm.type) {
          params.storeType = this.searchForm.type;
        }else {
          params.storeType = 0;
        }
        queryStore(params).then((res) => {
          closeLoading(this);
          if(res.code == "000000") {
            this.tableData = res.data.tradeStore;
            this.totalRows = res.data.totalCount;
          } else {
            this.tableData = [];
          }
        }).catch((error) => {
          this.$message.error("请重试");
        })
      },

      resetForm() {
        this.searchForm = {
          storeName: '',
          storeId: 0,
          storeType: 0,
          pageNo: 1,
          pageSize: 10,
          id: null,
          type: null,
        };
        this.searchList();
      },
      //新建店铺
      createShop() {
        this.$router.push({
          path: `/create-shop`
        })
      },
      //店铺管理
      shopManage(row) {
        localStorage.setItem('isShowGoods', 1)
        this.$router.push({
          path: '/goods-manage',
          query: {
            storeId: row.tradeStore.id,
          }
        })
        localStorage.setItem('storeId', row.tradeStore.id)
      },
      //编辑
      editShop(row) {
        this.$router.push({
          path: `/create-shop`,
          query:{
            storeId: row.tradeStore.id,
            storeData: JSON.stringify(row),
          }
        })
      },
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.searchForm.pageNo = 1;
        this.searchList();
      },
      handleNumChange(val) {
        this.searchForm.pageNo = val;
        this.searchList();
      },
    },
    filters: {
      storeTypeFormat: function(value){
        if (!value && value != 0) {
          return "-";
        } else {
          let hash = {
            1: "供货商",
            2: "医生小店",
            3: "小药房"
          };
          return hash[value];
        }
      },
      statusFormat(value) {
        if (!value && value != 0) {
          return "-";
        } else {
          let hash = {
            0: "下线",
            1: "上线",
          };
          return hash[value];
        }
      },
    },
  }
</script>
<style lang="scss">
  .yqshop-wrapper{
    .yqshop-content{
      background: #fff;
      padding: 10px;
      .header-title{
        padding: 10px 12px;
        font-size: 13px;
        color: #449284;
        border-bottom: 1px solid #efefef;
      }
    }
    .el-button--text{
      color: #449284;
      font-size: 14px;
      &::after{
        content: '';
        position: relative;
        height: 14px;
        /*border-right: 1px solid #EBEEF5;*/
        border-right: 1px solid #aaaaaa;
        padding-right: 10px;
      }
      &:last-of-type{
        &::after{
          content: '';
          position: relative;
          width: 1px;
          height: 14px;
          border-right: none;
        }
      }
    }
  }
</style>
