<template>
  <div>
    <p>联系电话:88888888 {{form.userName}}</p>
    <agreement @next="agreement"></agreement>
    <table v-if="isShow">
      <tr>
        <td>
          选择开店套餐：
          <el-checkbox-group v-model="form.packageCheckeds" @change="changePackage">
            <p v-for="(item,index) in packageList">
              <el-checkbox :label="item.id" :value="item.id">{{item.name}}</el-checkbox>
            </p>
          </el-checkbox-group>
          总价格:{{packagePriceSum}}
        </td>

        <td>
          <el-input v-model="form.name" placeholder="请输入店铺名称"></el-input>
          <div v-show="isShowComp">
            <div>
              填写认证信息
              申请类型:
              <el-radio-group v-model="form.shopType" @change="showCompOrPerson">
                <el-radio label="1">公司</el-radio>
                <el-radio label="0">个人</el-radio>
              </el-radio-group>
              <br>
              公司名称:
              <el-input v-model="form.compName" placeholder="请输入公司名称"></el-input>

              <!--  公司地址:
                <el-input placeholder="请输入公司地址"></el-input>-->
              统一社会信用码:
              <el-input v-model="form.socialCode" placeholder="请输入统一社会信用码"></el-input>

              联系地址:
              <el-select v-model="form.addressProvinceId" placeholder="请选择省" @change="changeAddress($event,'pro')">
                <el-option
                  v-for="item in address_pro"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>

              <el-select v-model="form.addressCityId" placeholder="请选择市" @change="changeAddress($event,'city')">
                <el-option
                  v-for="item in address_city"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>

              <el-select v-model="form.addressDistrictId" placeholder="请选择区" @change="changeAddress($event,'area')">
                <el-option
                  v-for="item in address_area"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              <br>
              营业执照:
              <image-upload-sign :pictureServerPath="pictureServerPath"
                                 v-model="form.businessLicense"></image-upload-sign>
              <!--<el-upload v-model="form.businessLicense"-->
              <!--class="avatar-uploader"-->
              <!--action="https://jsonplaceholder.typicode.com/posts/"-->
              <!--:show-file-list="false"-->
              <!--:on-success="handleAvatarSuccess"-->
              <!--:before-upload="beforeAvatarUpload">-->
              <!--<img v-if="imageUrl" :src="imageUrl" class="avatar">-->
              <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
              <!--</el-upload>-->

              法定经营范围:
              <el-input v-model="form.businessArea" placeholder="请输入法定经营范围"></el-input>
              *法人姓名:
              <el-input v-model="form.legalName" placeholder="请输入法人姓名"></el-input>
              *法人手机:
              <el-input v-model="form.legalPhone" placeholder="请输入法人手机"></el-input>
              *法人身份证:
              <!--<el-input v-model="form.identifiedCode" placeholder="请输入法人身份证"></el-input>-->
              法人身份证正面:
              <image-upload-sign :pictureServerPath="pictureServerPath" v-model="form.identifiedZ"></image-upload-sign>
              <!--<el-upload v-model="form.identifiedZ"-->
              <!--class="avatar-uploader"-->
              <!--action="https://jsonplaceholder.typicode.com/posts/"-->
              <!--:show-file-list="false"-->
              <!--:on-success="handleAvatarSuccess"-->
              <!--:before-upload="beforeAvatarUpload">-->
              <!--<img v-if="imageUrl" :src="imageUrl" class="avatar">-->
              <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
              <!--</el-upload>-->


              法人身份证反面:
              <image-upload-sign :pictureServerPath="pictureServerPath" v-model="form.identifiedF"></image-upload-sign>
              <!--<el-upload v-model="form.identifiedF"-->
              <!--class="avatar-uploader"-->
              <!--action="https://jsonplaceholder.typicode.com/posts/"-->
              <!--:show-file-list="false"-->
              <!--:on-success="handleAvatarSuccess"-->
              <!--:before-upload="beforeAvatarUpload">-->
              <!--<img v-if="imageUrl" :src="imageUrl" class="avatar">-->
              <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
              <!--</el-upload>-->


            </div>
          </div>
          <div v-show="isShowPerson">
            申请类型:
            <el-radio-group v-model="form.shopType" @change="showCompOrPerson">
              <el-radio label="1">公司</el-radio>
              <el-radio label="0">个人</el-radio>
            </el-radio-group>

            <el-form ref="form" :model="form" :rules="rules" label-width="180px">
              <div>
                联系人姓名:
                <el-input v-model="form.connName" prop="connName" placeholder="请输入联系人姓名"></el-input>
                联系人手机:
                <el-input v-model="form.connPhone" prop="connPhone" placeholder="请输入联系人手机"></el-input>
                身份证号:
                <el-input v-model="form.identifiedCode" placeholder="请输入身份证号"></el-input>

                身份证正面:
                <image-upload-sign :pictureServerPath="pictureServerPath" v-model="form.identifiedZ"></image-upload-sign>
                身份证反面:
                <image-upload-sign :pictureServerPath="pictureServerPath" v-model="form.identifiedF"></image-upload-sign>
              </div>
            </el-form>

          </div>
        </td>
      </tr>
    </table>
    <div>


      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button>返 回</el-button>
      </div>


    </div>


  </div>


</template>


<script>
  import agreement from './agreement'
  import {registerInfo, addRegisterInfo,} from '@/api/data/register'
  import {listAddressList} from '@/api/data/address'
  import {getConfigKey} from "@/api/system/config";

  export default {

    components: {
      agreement
    },
    data() {
      return {
        pictureServerPath: null,
        options: null,
        v: null,
        beforeAvatarUpload: null,
        value: '',
        handleAvatarSuccess: null,
        imageUrl: null,
        radioData: "1",
        isShow: false,
        isShowComp: true,
        isShowPerson: false,
        packageList: [],
        packagePriceSum: 0,
        address_pro: [],
        address_city: [],
        address_area: [],


        form: {
          packageCheckeds: [],
          shopType: '1',
          connName: '',
          socialCode: '',
          addressProvinceId: '',
          addressCityId: '',
          addressDistrictId: '',
          businessLicense: '',
          businessArea: '',
          legalName: '',
          legalPhone: '',
          identifiedCode: '',
          identifiedF: '',
          compName: '',
          userName : null
        },
        rules: {
          enterpriseName: []
        }
      }
    },
    name: "choose_package",
    created() {
      this.form.userName = this.$route.query.userName;
      this.initRegister();
    },

    methods: {
      getServierPicture() {
        let that = this
        getConfigKey('pictureServerPath').then(res => {
          that.pictureServerPath = res.msg
        })
      },
      changeAddress(id, p) {
        let address = {parentId: id}
        //切换省
        listAddressList(address).then(res => {
          if (p == 'root') {
            this.address_pro = res.data
          } else if (p == 'pro') {
            this.address_city = res.data
          } else if (p == 'city') {
            this.address_area = res.data
          }
        })
      },


      submit() {
        let that = this
        this.$refs['form'].validate(valid => {
          addRegisterInfo(this.form).then(resp => {
            if (resp.code == 200) {
              that.$router.push({
                path : '/register/preview'
              })
            }else{
              this.$modal.alertError(resp.msg)
            }
          })
        })
      },

      showCompOrPerson(v) {
        if (v == '1') {
          this.isShowComp = true
          this.isShowPerson = false
        } else {
          this.isShowComp = false
          this.isShowPerson = true
        }
      },
      agreement() {
        this.isShow = true
      },
      initRegister() {
        let that = this
        //获取套餐
        registerInfo().then(res => {
          that.packageList = res.data.packageList
        })
        //获取省数据
        this.changeAddress('0', 'root');
        this.getServierPicture()
      },
      changePackage(value) {
        let that = this
        let sum = 0
        this.packageList.forEach(function (item, index) {
          that.form.packageCheckeds.forEach(function (it, idx) {
            if (item.id == it) {
              sum += parseFloat(item.price)
            }
          })
        })
        this.packagePriceSum = sum
      }
    }
    ,

  }

</script>

<style scoped>

</style>
