<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.name" 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">新建店铺</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"></el-table-column>
        <el-table-column prop="name" label="店铺名称" min-width="100" align="center"></el-table-column>
        <el-table-column prop="type" label="店铺类型" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.type | dynamicFlagStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="店铺状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status | rangeStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="已上架商品数" min-width="120" align="center"></el-table-column>
        <el-table-column prop="createdTime" label="创建时间" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createdTime | liveDateFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="370" align="center">
          <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 { getRangeList,updateRangeStatus} from "../../utils/yqrange/yqrangeApi";
  export default {
    components: {
      BreadCrumb
    },
    data(){
      return{
        curmbFirst: '云鹊店铺',
        showAllFlag: false,
        showNewFlag: false,
        searchForm: {
          name: '',
          id: '',
          type: '',
          pageNo: 1,
          pageSize: 10,
        },
        totalRows: 0,
        tableData: [
        //   {
        //   id: '',
        //   name: '',
        //   type: null,
        //   status: '',
        //   num: null,
        //   createdTime: '',
        // }
        ],
        typeList: [{
          label: '供货商',
          value: '1',
        }, {
          label: '医生小店',
          value: '2',
        }, {
          label: '小药房',
          value: '3',
        }]
      }
    },
    created() {
      this.initPrivilege();
      this.searchList();
    },
    methods: {
      initPrivilege(){
        let idType = localStorage.getItem('storageIdType');
        this.searchForm.userType = idType;
        // 内部用户:运营人员
        if(idType == "1"){
          this.showAllFlag = true;
          this.showNewFlag = true;
        }
        // 外部用户
        else if(idType == "2"){
          this.showAllFlag = false;
          this.getUserAuth();
        }
      },
      // 外部用户权限
      getUserAuth(){
        let highMainManager = localStorage.getItem('highMainManager');
        let mainManager = localStorage.getItem('mainManager');
        let manager = localStorage.getItem('manager');

        if(highMainManager == "1" || mainManager == "1"){
          this.showNewFlag = true;
        }
        else if(manager == "1"){
          this.showNewFlag = false;
        }
      },

      searchList() {
        openLoading(this);
        let params = this.searchForm;

       /* getRangeList(params).then((res) => {
          closeLoading(this);
          if(res.code == "000000") {
            this.tableData = res.data.circleList;
            this.totalRows = res.data.count;
          } else {
            this.tableData = [];
          }
        }).catch((error) => {
          this.$message.error("请重试");
        })*/
      },

      resetForm() {
        this.searchForm = {
          name: '',
          id: '',
          type: ''
        };
        this.searchList();
      },
      //新建店铺
      createShop() {
        let enterType = 1;//1:add 2 edit
        this.$router.push({
          path: `/create-shop?enterType=${enterType}`
        })
      },
      //上线
      publishRange(row) {
        this.$confirm(`确定上线“${row.name}”吗？`, '', {
          confirmButtonText: '上线',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'range-make-box',
        }).then(() => {
          //  confirm
          this.updateStatus(row.id, "30");
        }).catch(() => {
          //  cancel
          // this.$message.error("上线失败");
        });
      },
      //下线
      unPublishRange(row) {
        this.$confirm(`确定下线“${row.name}”吗？`, '', {
          confirmButtonText: '下线',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'range-make-box',
        }).then(() => {
          this.updateStatus(row.id, "40");
          //  confirm
        }).catch(() => {
          //  cancel

        });
      },
      // 更新圈子状态（上线，下线）
      updateStatus(id, status){
        let params = {"id": id, "status": status};
        updateRangeStatus(params).then((res) => {
          closeLoading(this);
          if(res.code == "000000") {
            if(status == "40"){
              this.$message.success("下线成功");
            } else if(status == "30") {
              this.$message.success("上线成功");
            }else if(status == "50") {
              this.$message.success("解散成功");
            }
            this.searchList();
          } else {
            if(status == "40"){
              this.$message.error("下线失败，请重试");
            } else if(status == "30") {
              this.$message.error("上线失败，请重试");
            }else if(status == "50") {
              this.$message.error("解散失败，请重试");
            }
          }
        }).catch((error) => {
          if(status == "40"){
            this.$message.error("下线失败，请重试");
          } else if(status == "30") {
            this.$message.error("上线失败，请重试");
          }else if(status == "50") {
            this.$message.error("解散失败，请重试");
          }
        })
      },

      //店铺管理
      shopManage(row) {
        this.$router.push({
          path: '/role-manage?id=' + row.id,
        })
      },
      //编辑
      editShop(row) {
        let enterType = 2;//1:add 2 edit
        this.$router.push({
          path: `/create-shop?enterType`,
          query:{
            storeId:row.storeId,
            enterType:enterType,
          }
        })
      },
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.searchForm.pageNo = 1;
        this.searchList();
      },
      handleNumChange(val) {
        this.searchForm.pageNo = val;
        this.searchList();
      },
    },
  }
</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>
