<template>
  <div class="app-container">
    <div class="card-change">
      <div class="top-box">
        <div class="d-s">
          <el-input v-model="queryParams.name" placeholder="请输入油站名称" style="width: 200px;margin-right: 15px;"></el-input>
          <el-select v-model="queryParams.contractDeptId" placeholder="请选择所属机构" style="width: 200px;margin-right: 15px;">
            <el-option
              v-for="item in deptListSelect"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId+''"
            ></el-option>
          </el-select>
          <el-select v-model="queryParams.status" placeholder="请选择油站状态" style="width: 200px;margin-right: 15px;">
            <el-option
              v-for="dict in dict.type.zhzt"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          <el-select v-model="queryParams.turnoverType" placeholder="请选择计费方式" style="width: 200px;margin-right: 15px;">
            <el-option value="1" label="无限制"></el-option>
            <el-option value="2" label="时间限制"></el-option>
            <el-option value="3" label="预付费"></el-option>
            <el-option value="4" label="后付费"></el-option>
            <el-option value="5" label="年付费"></el-option>
            <el-option value="6" label="可创建油站站点数量"></el-option>
          </el-select>
          <el-date-picker
            v-model="beginTime"
            style="width: 140px"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始日期">
          </el-date-picker>
          至
          <el-date-picker
            v-model="endTime"
            style="width: 140px"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="d-s">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button  icon="el-icon-refresh-right" @click="resetQuery">重置</el-button>
        </div>

      </div>
      <div style="width: 100%;height: 68vh;overflow: auto">

      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="油站名称"
          >
        </el-table-column>
        <el-table-column
          prop="deptName"
          align="center"
          label="所属机构"
          >
        </el-table-column>
        <el-table-column
          prop="leaderName"
          align="center"
          width="100"
          label="油站负责人"
        >
        </el-table-column>
        <el-table-column
          prop="leaderPhone"
          align="center"
          label="联系电话"
        >
        </el-table-column>
        <el-table-column
          prop="turnoverType"
          align="center"
          width="80"
          label="计费方式"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.turnoverType == 1">无限制</span>
            <span v-if="scope.row.turnoverType == 2">时间限制</span>
            <span v-if="scope.row.turnoverType == 3">预付费</span>
            <span v-if="scope.row.turnoverType == 4">后付费</span>
            <span v-if="scope.row.turnoverType == 5">年付费</span>
            <span v-if="scope.row.turnoverType == 6">可创建油站站点数量</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="remind"
          align="center"
          label="到期提醒"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.remind || "--" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="userTotal"
          align="center"
          label="会员人数"
          width="80"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.userTotal || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          width="80"
          label="油站状态"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-value="qy"
              inactive-value="jy"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>

          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          align="center"
          width="180"
          label="操作">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: center;width: 100%">
              <div style="color: #409EFF;cursor: pointer;margin: 0 10px" v-hasPermi="['Service:enter']" @click="enterThePetrolStation(scope.row)">进入油站</div>
              <div style="color: #409EFF;cursor: pointer;margin: 0 10px" @click="godetails(scope.row.id,scope.row.contractDeptId)">查看详情</div>

            </div>

          </template>
        </el-table-column>
      </el-table>

      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getStoreList"
      />

    </div>

<!--    <el-card style="margin-top: 20px" v-for="(item,index) in arrlist" :key="index">-->
<!--      <div slot="header" class="clearfix">-->
<!--        <span>{{item.storeName || ''}}</span>-->

<!--      </div>-->
<!--      <div class="box-wrap">-->
<!--        <div class="zong-box" v-for="(items,index) in item.storeList" :key="index" >-->
<!--          <div class="pur-box" @click="godetails(items.id,items.contractDeptId)">-->
<!--            <el-tag type="success" v-if="items.status=='qy'">启用</el-tag>-->
<!--            <el-tag type="danger" v-else>禁用</el-tag>-->
<!--            <div class="disper-box">-->
<!--              <div class="box-img">-->
<!--                <img v-if="items.logo" :src="imagePath + items.logo" style="width: 96px;height: 96px">-->
<!--                <img v-else src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width: 96px;height: 96px">-->
<!--              </div>-->
<!--              <div >-->
<!--                <div class="title">{{items.name || ''}}</div>-->
<!--                <div class="box-hui">-->
<!--                  <div>注册时间：</div>-->
<!--                  <div>{{    items.createTime.substring(0,10) || ''}}</div>-->
<!--                </div>-->
<!--                <div class="box-hui">-->
<!--                  <div>联系人：</div>-->
<!--                  <div>{{items.contact || '暂无'}}</div>-->
<!--                </div>-->
<!--                <div class="box-hui">-->
<!--                  <div>联系电话：</div>-->
<!--                  <div>{{items.phone || '暂无'}}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

<!--          </div>-->
<!--          <div class="hui-bottom">-->
<!--            <div>-->
<!--              <div class="shang-biao">{{item.storeList.length || 0}}</div>-->
<!--              <div class="xia-biao">创建门店数（个）</div>-->
<!--            </div>-->
<!--            <div>-->
<!--              &lt;!&ndash; <div class="shang-biao">{{ items.userNum}}</div> &ndash;&gt;-->
<!--              <div class="shang-biao">{{ items.userNum}}</div>-->
<!--              <div class="xia-biao">会员数（人）</div>-->
<!--            </div>-->
<!--            <div>-->
<!--              <div class="shang-biao">{{  items.orderNum}}</div>-->
<!--              <div class="xia-biao">支付订单（笔）</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--      </div>-->
<!--    </el-card>-->
  </div>
</template>

<script>
import {
  Storelist, getUserNumApi,
  getOrderNumApi, getStorelist, singleSignOnApi
} from "@/api/service/service";
import {selectChildByDeptId} from "@/api/system/Site/site";
export default {
  name: 'service',
  dicts: ['zhzt'],
  data(){
    return{
      total:0,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      tableData: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      imagePath: process.env.VUE_APP_SERVER_URL,

      arrlist:[],
      value1:'',
      queryParams: {
        name: '',
        contractDeptId:'',
        status: '',
        pageNo: 1,
        pageSize: 10,

      },
      beginTime:"",
      endTime:"",
      deptListSelect:[]
    }
  },
  created() {
    this.getStoreList();
    this.selectChildByDeptIdApi();
  },
  async mounted() {
    await this.getlist()
  },
  methods:{
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        name: '',
        contractDeptId:'',
        status: '',
        pageNo: 1,
        pageSize: 10,
      }
      this.beginTime = ''
      this.endTime = ''
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getStoreList();
    },
    // 查询
    selectChildByDeptIdApi() {
      selectChildByDeptId().then(res => {
        this.deptListSelect = res.data
      })
    },
    getStoreList(){
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime)
        dateRange.push(this.endTime)
      }
      getStorelist(this.addDateRange(this.queryParams,dateRange)).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    async getlist(){
      await Storelist(this.queryParams).then(res=>{
        console.log(res)
        this.arrlist = res.data.records
        // this.total = res.data.total

      })
    },

    res() {
      this.queryParams= {
        storeName: '',
        status: '',
        pageNo: 1,
        pageSize: 10,

      }

      this.getlist()
    },
    godetails(id,deptId){
      this.$router.push({
        path:'/Service/details',
        query:{
          id:id,
          deptId:deptId
        }
      })

    },
    enterThePetrolStation(data) {
      if (data.status === 'jy') {
        this.$message('该油站已被禁用');

        return
      }
      singleSignOnApi(data.id).then(res=>{
        if (res.code == 200) {
          window.open(this.pcUrl+'index?entrance='+data.id)
        }
      })
    },

  }

}
</script>

<style scoped lang="scss">

.app-container{
  width: 100%;
  height: 100%;
  /* height: 100vh; */
  background: #f9f9f9;
}
.ding-top{
  width: 100%;
  box-sizing: border-box;

}
.box-dis{
  display: flex;
  align-items: center;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-wrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.zong-box{
  width: 18%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  margin-bottom: 30px;
  margin-right: 30px;
}
.pur-box{
  width: 100%;
  padding: 10px;

}
.disper-box{
  display: flex;
  margin-top: 10px;
}
.box-img{
  width: 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 10px;
}
.box-hui{
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #99a9bf;
  margin-top: 4px;
}
.title{
  font-size: 18px;
  font-weight: bold;
}
.hui-bottom{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fafafc;
  padding: 20px 10px;
}
.shang-biao{
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
.xia-biao{
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.top-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.d-s{
  display: flex;
  align-items: center;
}
</style>
