<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">
        <p class="p_title">
           &emsp;&emsp; 恭喜你顺利完成所有营地课程，点击【填写/修改收货地址】以便确认收货地址，证书将以纸质形式邮寄。
        </p>
        <div>
          <img src="@/assets/img/certificate.jpg" alt="" style="width: 25%" />
        </div>

        <div class="btn">
          <el-button @click="getCertifi">填写/修改收货地址</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="certificate_name">
          <el-input
            v-model="addressForm.certificate_name"
            placeholder="填写真实姓名"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="收件人电话" prop="certificate_phone">
          <el-input
            v-model="addressForm.certificate_phone"
            placeholder="填写真实电话"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="收货地址" prop="certificate_province">
              <el-select
                ref="certificate_province"
                v-model="addressForm.certificate_province"
                clearable
                placeholder="选择省份"
                @change="changeProvince($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="certificate_city">
              <el-select
                ref="certificate_city"
                v-model="addressForm.certificate_city"
                clearable
                placeholder="选择城市"
              >
                <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="county">
              <!-- <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-input
                v-model="county"
                placeholder="选择所在区县"
                size="small"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="" prop="certificate_address">
          <el-input
            ref="certificate_address"
            v-model="certificate_address"
            placeholder="填写详细地址"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary" @click="setAddress()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

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

export default {
  name: "certificate",

  data() {
    return {
      dialogVisible: false, //确认收货地址对话框
      addressRules: {
        certificate_name: [
          { required: true, message: "姓名不能为空！", trigger: "blur" },
        ],
        certificate_phone: [
          {
            required: true,
            message: "手机号不能为空！",
            trigger: "blur",
          },
          { validator: validator.validatePhone, trigger: "blur" },
        ],
        certificate_province: [
          {
            required: true,
            message: "请选择所在省份！",
            trigger: "change",
          },
        ],
        certificate_city: [
          {
            required: true,
            message: "请选择所在城市！",
            trigger: "change",
          },
        ],
        // county: [
        //   { required: true, message: "请选择所在区县！", trigger: "blur" },
        // ],
        certificate_address: [
          { required: true, message: "详细地址不能为空！", trigger: "blur" },
        ],
      },
      addressForm: {
        certificate_name: "",
        certificate_phone: "",
        certificate_province: null,
        certificate_city: null,
        certificate_address: "",
      },
      county: "", //区县
      certificate_address: "", //详细地址
      selectProvince: [], //省份
      CityName: {}, //根据省份筛选出所有城市的对象
      selectCityJiguan: [], //籍贯城市列表
      selectCitySchool: [], //就读中学-城市列表
      jgProvinceCode: "", //省份id
      jiguan_city: "", //城市id(和省份id拼接)
    };
  },
  created() {
    this.getProAndCity();
  },
  watch: {},
  methods: {
    getCertifi() {
      this.getAddress();
    },
    getAddress() {
      // console.log(111111)
      getAddress({}).then((res) => {
        // console.log(res, "getAddress");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        // console.log(Object.keys(res.data.info),'info')
        // if (Object.keys(res.data.info).length != 0) {
        //   return this.$message.error("已保存地址");
        // }
        this.dialogVisible = true;

        this.addressForm.certificate_name = res.data.info.certificate_name;
        this.addressForm.certificate_phone = res.data.info.certificate_phone;
        this.addressForm.certificate_province =
          res.data.info.certificate_province;
        this.addressForm.certificate_city = res.data.info.certificate_city;
        this.selectCitySchool = this.getCurrentCityLists(
          this.addressForm.certificate_province
        );
        if (res.data.info.certificate_address) {
          this.county = res.data.info.certificate_address.split("-")[0];
          this.certificate_address =
            res.data.info.certificate_address.split("-")[1];
        }
      });
    },

    // 获取省份城市
    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;
      });
    },

    //选择籍贯省份change事件
    changeProvince(val, status) {
      console.log(val);
      this.selectCitySchool = [];
      this.selectCitySchool = this.getCurrentCityLists(val); //在此调用城市筛选列表
      if (!status) {
        this.addressForm.certificate_city = "";
      }
    },

    //返回当前省份下的城市列表
    getCurrentCityLists(val) {
      console.log(val);
      let currentCity = [];
      if (
        this.CityName == null ||
        !this.CityName ||
        Object.values(this.CityName).length == 0
      ) {
        getProAndCity({})
          .then((res) => {
            if (res.data.code === 200) {
              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;
    },
    // 提交
    setAddress() {
      this.addressForm.certificate_address =
        this.county.toString() + "-" + this.certificate_address.toString();
      this.$refs["addressRef"].validate((valid, object) => {
        console.log(valid, "valid");
        if (!valid) {
          return false;
        }
      });

      setAddress(this.addressForm).then((res) => {
        // console.log(res, "setAddress");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        this.$message.success(res.data.message);
        this.dialogVisible = false;
      });
    },
  },
};
</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: 28px;
        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>
