<template>
  <div class="medAddress-new">
    <div class="address-item" v-if="isShowDj">
      <div class="name">代煎信息</div>
      <div class="value">
        <div class="daijiao-check flex flex-row-left flex-col-center"
             v-for="item in optionsAgency" :key="item.value"
             @click="changeDaijian(+item.value)">
          <div v-if="+item.value === form.isDaiJian" class="img-body active">
            <img src="~@/assets/new-icon/checked.png" alt />
          </div>
          <div v-else class="img-body"></div>
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
    <div class="address-item" v-if="isShowPs">
      <div class="name">配送信息</div>
      <div class="value">
        <div class="daijiao-check flex flex-row-left flex-col-center"
             v-for="item in optionsDelivery" :key="item.value"
             @click="changeKd(+item.value)">
          <div v-if="+item.value === form.iskD" class="img-body active">
            <img src="~@/assets/new-icon/checked.png" alt />
          </div>
          <div v-else class="img-body"></div>
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
    <!-- isShowPs -->
    <div class="address-item" v-if="false">
      <div class="name"></div>
      <div class="value">
        <div class="value-item">
          <span>收货人</span>
          <el-input size="small" placeholder="请输入" v-model="form.savename"></el-input>
        </div>
        <div class="value-item">
          <span>收货电话</span>
          <el-input size="small" placeholder="请输入" v-model="form.phone"></el-input>
        </div>
      </div>
    </div>
    <!-- isShowPs -->
    <div class="address-item" v-if="false">
      <div class="name"></div>
      <div class="value">
        <div class="value-item">
          <span>收货地址</span>
          <div class="city1 city">
            <el-select
              size="small"
              v-model="form.province"
              placeholder="选择省"
              @change="proC($event)"
            >
              <el-option
                :label="item.name"
                :value="item.code"
                v-for="(item,index) in provinceList"
                :key="'m'+index"
              ></el-option>
            </el-select>
          </div>
          <div class="city1 city">
            <el-select size="small" v-model="form.city" placeholder="选择市" @change="cityC($event)">
              <el-option
                :label="item.name"
                :value="item.code"
                v-for="(item,index) in cityList"
                :key="'n'+index"
              ></el-option>
            </el-select>
          </div>
          <div class="city1 city">
            <el-select size="small" v-model="form.area" placeholder="选择区">
              <el-option
                :label="item.name"
                :value="item.code"
                v-for="(item,index) in areaList"
                :key="'o'+index"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <!-- isShowPs -->
    <div class="address-item" v-if="false">
      <div class="name"></div>
      <div class="value">
        <div class="value-item">
          <span style="margin-right: 0;"></span>
          <el-input size="small" placeholder="请输入" v-model="form.address"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getProver, getArea, getPatAddress } from "@/api/city.js";
import { getAddressForHospital } from "@/api/diagnosis.js";

import { mapGetters } from "vuex";
export default {
  props: {
    container_i: {
      type: Number,
      default: 0
    },
    optionsAgency: {
      type: Array,
      default: () => [],
    },
    optionsDelivery: {
      type: Array,
      default: () => [],
    },
    isShowDj: {
      type: Boolean,
      default: true
    },
    isShowPs: {
      type: Boolean,
      default: true
    },
    isDaijian: {
      type: [Number, String],
      default: 0
    },
    isPs: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      form: {
        isDaiJian: 2, // 1是 0 否 2自煎
        radio: 1, // 是否配送  0:是 1:否
        savename: "",
        phone: "",
        province: "",
        city: "",
        area: "",
        address: "",
        iskD: 1 // 1 寄到本院 0 快递
      },
      provinceList: [],
      cityList: [],
      areaList: []
    };
  },
  computed: {
    ...mapGetters(["getuserinfo", "getPatiensInfo"])
  },
  watch: {
    isDaijian: {
      immediate: true,
      deep: true,
      handler: function() {
        this.form.isDaiJian = this.isDaijian;
      }
    },
    isPs: {
      immediate: true,
      deep: true,
      handler: function() {
        console.log(this.isPs, "弹窗组件打印");

        this.form.iskD = this.isPs;
      }
    },
    isShowDj: {
      immediate: true,
      deep: true,
      handler: function() {
        if (!this.isShowDj) {
          // this.changeDaijian(0);
        } else {
          // this.changeDaijian(1);
        }
      }
    },
    isShowPs: {
      immediate: true,
      deep: true,
      handler: function() {
        if (!this.isShowPs) {
          // this.changePeiSong(1);
        } else {
          // this.changePeiSong(0);
        }
      }
    }
  },
  mounted() {
    this.getProver();
    this.getAddressForHospital();
  },
  methods: {
    changeKd(data) {
      this.form.iskD = data;
      if (data === 0) {
        this.getAddressForHospital();
      } else {
        this.getPatAddress();
      }
      this.$emit("psChange", this.form.iskD);
    },
    // 代煎选项点击
    changeDaijian(data = null) {
      if (data === null) {
        this.form.isDaiJian = this.form.isDaiJian === 1 ? 0 : 1;
      } else {
        if (this.form.isDaiJian === data) {
          // 有 自费 选项
          if (this.optionsAgency.find(option => option.value === '2')) this.form.isDaiJian = data;
          else this.form.isDaiJian = 2;
        } else {
          this.form.isDaiJian = data;
        }
      }

      this.$emit("djChange", this.form.isDaiJian);
    },
    // 修改省的数据
    proC(e) {
      // console.log(e)
      this.form.city = "";
      this.form.area = "";
      this.getArea(e, 1);
    },
    cityC(e) {
      this.form.area = "";
      this.getArea(e, 2);
    },
    // 获取省数据
    async getProver() {
      return;
      let res = await getProver();
      if (res.ResultCode == 0) {
        this.provinceList = res.Data;
      }
    },
    // 获取市数据
    async getArea(code, type) {
      return;
      let res = await getArea(code);
      if (res.ResultCode == 0) {
        if (type == 1) {
          this.cityList = res.Data;
        } else {
          this.areaList = res.Data;
        }
      }
    },
    // 获取患者地址信息
    async getPatAddress() {
      return;
      if (!this.getPatiensInfo.basisPatient.pid) return;
      let res = await getPatAddress({
        patId: this.getPatiensInfo.basisPatient.pid
      });
      if (res.ResultCode == 0) {
        this.form.address = res.Data.detailadress;
        this.form.savename = res.Data.name;
        this.form.phone = res.Data.phone;
        this.form.province = res.Data.province;
        this.form.city = res.Data.city;
        this.form.area = res.Data.district;

        this.getArea(res.Data.province, 1);
        this.getArea(res.Data.city, 2);
      }
    },
    // 获取寄到本院地址数据
    async getAddressForHospital() {
      return;
      let res = await getAddressForHospital({});
      if (res.ResultCode == 0) {
        this.form.savename = this.getPatiensInfo.basisPatient.name;
        this.form.phone = this.getPatiensInfo.basisPatient.phone;
        this.form.province = res.Data.province;
        this.form.city = res.Data.city;
        this.form.area = res.Data.district;

        this.getArea(res.Data.province, 1);
        this.getArea(res.Data.city, 2);

        this.form.address = res.Data.adressdetail;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.address-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 10px;

  .name {
    font-size: 16px;
    color: #000;
    width: 100px;
  }

  .value {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    &-item {
      display: flex;
      align-items: center;
      flex: 1;
      margin-right: 10px;

      span {
        display: block;
        width: 80px;
        margin-right: 10px;
      }
    }

    // &-item ::v-deep .el-input__inner {
    //   //   width: 200px;
    //   width: 180px;
    // }
  }
}

.daijiao-check {
  margin-right: 8px;

  .img-body {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    font-size: 0;

    img {
      width: 14px;
      height: 14px;
    }
  }

  .active {
    border: 0px solid #5386f6;

    img {
      width: 17px;
      height: 17px;
    }
  }

  span {
    font-size: 16px;
    margin-left: 5px;
    cursor: pointer;
  }
}
</style>