
<template>
  <div class="shopDetail app-container">
    <el-form
      :model="setQuery"
      ref="setQuery"
      :rules="rules"
      label-width="130px"
      disabled
    >
      <el-form-item label="商户类型：" prop="accountChildType">
        <el-select
          v-model="setQuery.accountChildType"
          size="small"
          clearable
          class="item-width-300"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商户名称：" prop="accountName">
        <el-input
          v-model="setQuery.accountName"
          size="small"
          class="item-width-300"
        ></el-input>
      </el-form-item>
      <el-form-item label="所在地区：" prop="district">
        <el-select
          v-model="setQuery.province"
          size="small"
          clearable
          class="item-width-150"
          placeholder="请选择省"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="setQuery.city"
          size="small"
          clearable
          class="item-width-150 ml10"
          placeholder="请选择市"
        >
          <el-option
            v-for="item in cityList"
             :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="setQuery.district"
          size="small"
          clearable
          class="item-width-150 ml10"
          placeholder="请选择区"
        >
          <el-option
            v-for="item in countyList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人：" prop="contactName">
        <el-input
          v-model="setQuery.contactName"
          size="small"
          class="item-width-300"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号：" prop="phoneNum">
        <el-input
          v-model="setQuery.phoneNum"
          :maxlength="11"
          size="small"
          class="item-width-300"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注：" prop="notes">
        <el-input
          v-model="setQuery.notes"
          class="item-width-300"
          type="textarea"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="search">
      <div>
        <el-input
          v-model="query.shopNameOrPhoneNum"
          size="small"
          placeholder="请输入门店名称"
          class="item-width-200 "
        ></el-input>
        <el-select
          v-model="query.state"
          size="small"
          clearable
          class="item-width-200 ml10"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
     
    </div>

    <el-table
      :data="setQuery.details.content.records"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="店铺名称"
        prop="shopName"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="address"
        align="center"
        label="地址"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="shopManager"
        align="center"
        label="店长"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="applyTime"
        align="center"
        label="申请时间"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="状态"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        {{scope.row.state == 1?'正常':'禁用'}}
      </template>
      </el-table-column>
      
      <el-table-column prop="address" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleDetail(scope.row)"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="handleDetail(scope.row)"
            >{{scope.row.status == 1?'禁用':'启用'}}</el-button>
          <el-button type="text" size="small" @click="handleDel(scope.row)"
            >删除</el-button>
          
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="query.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="setQuery.details.content.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
  <script>
  import {debounce} from '@/utils/index';
import { getShopType,accountDetail,getMainId } from "@/api/user";
import {getList} from '@/api/shop';
import {getRegion} from '@/api/payment';

export default {
  name: "shopDetail",
  data() {
    return {
      setQuery: {
        accountChildType: "",
        accountId: "",
        accountName: "",
        accountType: "202",
        address: "",
        city: "",
        contactName: "",
        district: "",
        mapLat: "",
        mapLon: "",
        notes: "",
        phoneNum: "",
        province: "",
        details:{
          content:{
            records:[],
            total:0
          }
        }
      },
      rules: {
        accountName: [{ required: true, message: "请输入账户名称", trigger: "blur" }],
        accountChildType: [
          { required: true, message: "请选择账户类型", trigger: "change" },
        ],
        district: [
          { required: true, message: "请输入所在区域", trigger: "blur" },
        ],
        contactName: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        phoneNum: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        notes: [
          { required: true, message: "请输入备注", trigger: "blur" },
        ],
      },
      tableData: [],
      options1:[
        {
            label:'商户类型',
            value:1
        },
        {
            label:'代理商渠道',
            value:2
        }
      ],
      options: [
        {
          value: null,
          label: "全部状态",
        },
        {
          value: "1",
          label: "正常",
        },
        {
          value: "0",
          label: "禁用",
        },
       
      ],
      loading: false,
      query: {
        shopMainId:0,
        accountId:0,
        shopNameOrPhoneNum: "",
        state: null,
        currentPage: 1,
        pageSize: 10,
      },
      title: "",
      total: 0,
      provinceList: [],//省
      cityList: [],//市
      countyList: [],//区
    };
  },
  watch: {
    query: {
      handler: debounce(function(val) {
        this.accountDetail()
        console.log(1);
      }),
      deep:true
    },
    'setQuery.province':debounce(function(val) {
      if(val){
        this.getRegion('city',val)
      }
    }),
    'setQuery.city':debounce(function(val) {
      if(val){
        this.getRegion('county',val)
      }
    }),
  },
  methods: {
    // 获取地区数据
    getRegion(type,code=''){
      getRegion({type,code}).then(res=>{
        if (res.state == "Success") {
          this[type+'List'] = res.content
        }
      })
    },
    getShopType() {
      getShopType().then((res) => {
        if (res.state == "Success") {
          for (const key in res.content) {
            if (Object.hasOwnProperty.call(res.content, key)) {
              this.options1.push({
                value: key,
                label: res.content[key],
              });
            }
          }
        }
      });
    },
    handle(item, index) {
      this.$set(item, "status", this.tableData[index].status == 1 ? 0 : 1);
    },
    handleDel(){},
    handleDetail(row) {
      this.$router.push("/userManage/shopDetail/shopDetail");
    },
    handleSizeChange(val) {
      this.query.currentPage = 1;
      this.query.pageSize = val;
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
    this.getList()
    },
    getList(){
      this.loading = true;
      getList(this.query).then(res=>{
        this.loading = false;
          if(res.state == 'Success'){
            this.tableData = res.content.records
            this.total = res.content.total
          }
      })
    },
    getMainId(){
      return new Promise((resolve,reject)=>{
        // getMainId({shopId:}).then(res=>{
        //   if(res.state == 'Success'){
        //     resolve()
        //   }
        // })
      })
      
    },
    accountDetail(){
      this.loading = true
      accountDetail(this.query).then(res=>{
        this.loading = false
          if(res.state == 'Success'){
            this.setQuery = res.content
          }
      })
    }
  },
  created() {
    this.query.shopMainId = this.$route.query.id
    this.query.accountId = this.$route.query.id
    
    // this.getMainId().then(res=>{
    //   this.getList()
    // })
    this.getShopType()
    this.accountDetail()
    this.getRegion('province');
  },
};
</script>
  
<style lang="scss" scoped>
.shopDetail {
  .search {
    justify-content: space-between;
    .add-btn {
      // margin-right: 20px;
    }
  }
}
</style>
  