<template>
  <div class="addDesignerPage">
    <div class="header">
      <van-nav-bar class="navBar" title="设计师招募" left-arrow @click-left="onClickLeft">
        <template #right>
          <span style="color: #0057ba" @click="editorFn">编辑 </span>
        </template>
      </van-nav-bar>
    </div>
    <div class="content">
      <van-form ref="tabstoreVal" readonly :scroll-to-error="true" :show-error="false">
        <van-field readonly :value="fromData.storeCode" label="客户编号">
          <template #left-icon>
            <span class="van-f-red"></span>
          </template>
        </van-field>
        <van-field
          v-model="fromData.storeName"
          label="设计师名称"
          placeholder="请输入设计师名称"
          :rules="[{ required: true, message: '请输入设计师名称' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          type="tel"
          v-model="fromData.telephone"
          label="手机号"
          placeholder="请输入手机号">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-row style="border-bottom: 1px solid #ebedf0">
          <van-field
            rows="1"
            autosize
            type="textarea"
            readonly
            clickable
            name="picker"
            :value="fromData.chainName"
            label="经销商名称"
            placeholder="点击选择经销商名称"
            :rules="[
              {
                required: true,
                message: '请选择经销商',
              },
            ]">
            <template #left-icon>
              <span class="van-f-red">*</span>
            </template>
          </van-field>
        </van-row>
        <van-field
          readonly
          clickable
          name="calendar"
          :value="fromData.enterTime"
          label="会员录入时间"
          placeholder="请选择日期"
          :rules="[
            {
              required: true,
              message: '请选择日期',
            },
          ]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="picker"
          :value="fromData.storeCategoryName"
          label="会员属性"
          placeholder="请选择会员属性"
          :rules="[
            {
              required: true,
              message: '请选择会员属性',
            },
          ]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="picker"
          :value="fromData.designerLevel"
          label="设计师级别"
          placeholder="请选择设计师级别"
          :rules="[
            {
              required: true,
              message: '请选择设计师级别',
            },
          ]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          v-model="fromData.designerCompanyName"
          label="设计公司名称"
          placeholder="请输入设计公司名称"
          :rules="[{ required: true, message: '请输入设计公司名称' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          v-model="fromData.addressLine"
          label="设计师公司地址"
          placeholder="请输入地址"
          rows="1"
          autosize
          type="textarea"
          :rules="[
            {
              required: true,
              message: '请输入地址',
            },
          ]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="picker"
          :value="fromData.provinceName"
          label="省(州)"
          placeholder="点击选择省(州)">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="picker"
          :value="fromData.cityName"
          label="城市"
          placeholder="点击选择城市">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="picker"
          :value="fromData.districtName"
          label="区(县)"
          placeholder="点击选择区(县)">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          v-model="fromData.designerStoreRemark"
          rows="2"
          autosize
          type="textarea"
          label="备注"
          placeholder="请输入备注">
        </van-field>
      </van-form>
    </div>
  </div>
</template>

<script>
import { getById } from '@/api/index';
export default {
  data() {
    return {
      fromData: {
        storeCode: '',
        storeName: '',
        telephone: '',
        chainName: '',
        enterTime: '',
        storeCategoryName: '',
        designerLevel: '',
        storeCategory: '',
        designerCompanyName: '',
        provinceName: '',
        cityName: '',
        districtName: '',
        addressLine: '',
        lat: '',
        lon: '',
        designerStoreRemark: '',
      },
    };
  },
  activated() {
    this.toastLoading(0, '加载中...', true);
    // 获取详情
    this.getDetail();
  },
  methods: {
    editorFn() {
      this.$router.push({
        path: '/addDesignerEdit',
        query: { id: this.$route.query.id },
      });
    },
    getDetail() {
      getById({ storeId: this.$route.query.id }).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.fromData = res.data;
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.addDesignerPage {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .header {
    height: 46px;
  }
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
