<template>
  <div class="certificate">
    <div class="title">
      <div class="homework_titile">营地证书</div>
    </div>
    <!-- <div class="content_empty"> -->
    <!-- <div>
        <img src="@/assets/img/homework/homework.png" alt="" />
      </div>

      <p>同学你好，老师暂未发布作业</p>
      <p>请于2021年XX年XX月XX日 前往网站查看作业</p> -->
    <!-- </div> -->
    <div class="content">
      <div class="top">
        <div class="p_title">恭喜你顺利结业！点击【获取营地证书】确认收货地址，证书将以纸质形式邮寄上门</div>
        <div>
          <img src="@/assets/img/signUp/offer.png" alt="" />
        </div>

        <div class="btn">
          <el-button @click="getAddress">获得营地证书</el-button>
        </div>
      </div>

      <div class="pay_bottom">
        <div>注意事项：</div>
        <div>
          1、学生支付完成后请不要立即关闭浏览器，等待支付完成返回本页面，以确认支付完成。
        </div>
        <div>
          2、支付确认后，将不能再修改姓名和身份证号，请在支付前核对信息。
        </div>
      </div>
    </div>
    <!-- 确认收货地址对话框  -->
    <el-dialog title="确认收货地址" :visible.sync="dialogVisible" width="40%">
      <el-form ref="addressRef" :model="addressForm" :rules="addressRules">
        <el-form-item label="收件人" prop="name">
          <el-input
            v-model="addressForm.name"
            placeholder="填写真实姓名"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="收件人电话" prop="phone">
          <el-input
            v-model="addressForm.phone"
            placeholder="填写真实电话"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="收货地址" prop="province">
              <el-select
                ref="province"
                v-model="addressForm.province"
                clearable
                placeholder="选择省份"
                @change="changeProvince(2, $event)"
              >
                <el-option
                  v-for="item in selectProvince"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="no_label" label=" " prop="city">
              <el-select
                ref="city"
                v-model="addressForm.city"
                clearable
                placeholder="选择城市"
                @change="changeCity($event)"
              >
                <el-option
                  v-for="item in selectCitySchool"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="no_label" label=" " prop="school">
              <el-select
                ref="school"
                v-model="addressForm.school"
                clearable
                placeholder="选择所在区县"
              >
                <el-option
                  v-for="item in selectSchoolList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
         
        </el-row>
         <el-form-item label="" prop="detail_address">
            <el-input
              v-model="addressForm.detail_address"
              placeholder="填写详细地址"
              size="small"
              clearable
            ></el-input>
          </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
import { getProAndCity, getSchool } from "r/index/signUp";
import validator from "common/validator";

export default {
  name: "certificate",

  data() {
    return {
      dialogVisible: false, //确认收货地址对话框
      addressRules: {
        name: [{ required: true, message: "姓名不能为空！", trigger: "blur" }],
        phone: [
          {
            required: true,
            message: "手机号不能为空！",
            trigger: "blur",
          },
          { validator: validator.validatePhone, trigger: "blur" },
        ],
        province: [
          {
            required: true,
            message: "请选择所在学校省份！",
            trigger: "change",
          },
        ],
        city: [
          {
            required: true,
            message: "请选择所在学校城市！",
            trigger: "change",
          },
        ],
        school: [
          { required: true, message: "请选择所在学校！", trigger: "change" },
        ],
        detail_address: [
          { required: true, message: "详细地址不能为空！", trigger: "blur" },
        ],
      },
      addressForm: {
        name: "",
        phone: "",
        province: null,
        city: null,
        school: null,
        detail_address: "",
      },
      selectProvince: [], //省份
      CityName: {}, //根据省份筛选出所有城市的对象
      selectCityJiguan: [], //籍贯城市列表
      selectCitySchool: [], //就读中学-城市列表
      selectSchoolList: [], //就读中学-中学列表
      jgProvinceCode: "", //省份id
      jiguan_city: "", //城市id(和省份id拼接)
    };
  },
  created() {
     this.getSchool();
    this.getProAndCity();
  },
  watch: {},
  methods: {
    getAddress() {
      this.dialogVisible = true;
    },
    // 获取省份城市
    getProAndCity() {
      getProAndCity({}).then((res) => {
        // console.log(res, "getProAndCity");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        this.selectProvince = res.data.province_list;
        // this.CityName = res.data.city_list;
        // console.log(this.selectProvince, this.CityName);
      });
    },

    //选择籍贯省份change事件
    changeProvince(type, val, status) {
      // console.log(type, val);
      if (type == 1) {
        this.selectCityJiguan = [];
        this.selectCityJiguan = this.getCurrentCityLists(val);
        if (!status) {
          this.jiguan_city = "";
          this.addressForm.jiguan_code = "";
        }
      } else {
        this.selectCitySchool = [];
        this.selectCitySchool = this.getCurrentCityLists(val); //在此调用城市筛选列表
        if (!status) {
          this.addressForm.city = "";
          this.addressForm.school = "";
          this.selectSchoolList = []; //重新选择省份时候，学校list清空
        }
      }
    },

    //返回当前省份下的城市列表
    getCurrentCityLists(val) {
      let currentCity = [];
      if (
        this.CityName == null ||
        !this.CityName ||
        Object.values(this.CityName).length == 0
      ) {
        getProAndCity({})
          .then((res) => {
            // console.log(res, "getProAndCity");
            if (res.data.code === 200) {
              // this.selectProvince = res.data.province_list;
              this.CityName = res.data.city_list;

              for (let key in this.CityName) {
                if (this.CityName[key].parent_id == val) {
                  currentCity.push(this.CityName[key]);
                }
              }
              return currentCity;
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      } else {
        for (let key in this.CityName) {
          if (this.CityName[key].parent_id == val) {
            currentCity.push(this.CityName[key]);
          }
        }
        return currentCity;
      }
      return currentCity;
    },
    // 籍贯城市change事件
    getJiguan() {
      this.addressForm.jiguan_code =
        this.jgProvinceCode.toString() + this.jiguan_city.toString();
    },
    getSchool() {
      getSchool({}).then((res) => {
        // console.log(res, "getSchool");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        this.schoolName = res.data.school_list;
      });
    },
    // 学校城市change事件
    changeCity(val, status) {
      // console.log(12345333,val,status)
      this.selectSchoolList = [];
      this.selectSchoolList = this.getCurrentSchoolLists(val);
      if (!status) {
        this.addressForm.school = "";
      }
    },
    // 返回当前城市下的学校列表
    getCurrentSchoolLists(val) {
      let currentSchool = [];
      // console.log(this.schoolName);
      if (
        this.schoolName == null ||
        !this.schoolName ||
        Object.values(this.schoolName).length == 0
      ) {
        getSchool({})
          .then((res) => {
            // console.log(res)
            if (res.data.code === 200) {
              this.schoolName = res.data.school_list;
              let code = this.$store.state.indexIdentity;
              window.localStorage.setItem(
                "schoolName" + code,
                JSON.stringify(res.data.list)
              );
              for (let key in this.schoolName) {
                if (this.schoolName[key].city_id == val) {
                  currentSchool.push(this.schoolName[key]);
                }
              }
              return currentSchool;
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      } else {
        // console.log(this.schoolName, 111);
        for (let key in this.schoolName) {
          // console.log(key, this.schoolName[key]);
          if (this.schoolName[key].city_id == val) {
            currentSchool.push(this.schoolName[key]);
          }
        }
        // console.log(currentSchool, 222);
        return currentSchool;
      }
      return currentSchool;
    },
  },
};
</script>


<style lang="scss" >
@import "a/scss/btn";

.btn {
  padding-bottom: 0 !important;
  .el-button {
    width: 160px !important;
  }
}
.flex {
  display: flex;
}

.certificate {
  // background: #ffffff;
  // width: 856px;

  .title {
    padding: 50px 50px 0 50px;
    .homework_titile {
      font-size: 24px;
      font-weight: 500;
      color: #1b1419;
      line-height: 24px;
      margin-bottom: 40px;
      text-align: center;
    }
  }
  // 空状态
  // .content_empty {
  // padding-bottom: 200px;
  // p,
  // div {
  //   text-align: center;
  // }
  // }

  // 有证书时候

  .content {
    padding: 0 30px 80px 30px;
    .top {
      padding-bottom: 80px;
      .p_title {
        font-size: 18px;
        font-weight: 500;
        color: #12141c;
        line-height: 18px;
        margin: 10px 0 30px 0;
      }
      div {
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        color: #666666;
        line-height: 18px;
      }
    }
  }
  //  注意事项
  .pay_bottom {
    font-size: 12px;
    font-weight: 500;
    color: #999999;
    line-height: 21px;
  }

  .el-form-item {
    margin-bottom: 20px;

    // item的验证红点点
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #12141c;
    }
    &.no_label .el-form-item__label {
      width: 0 !important;
    }
    &.no_label .el-form-item__label::before {
      content: "" !important;
    }

    &.no_label .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>
