<template>
  <div>
    <el-dialog title="医院信息审核" :visible.sync="showToexamine" :before-close="handleClose" center>
      <el-form ref="toexamineForm" :rules="rules" :model="toexamineForm" label-width="100px">
        <p class="title">对比信息</p>

        <el-row>
          <el-col :span="24">
            <el-form-item label="对比结果：">
              <el-select v-model="compareResultVal" :disabled="notUser" class="compareResultsty">
                <el-option v-for="item in compareResultData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <div v-show="isCompareResult">
          <p class="atypismStyle">不一致项目&nbsp;&nbsp;:</p>
          <el-table :data="atypismData" border style="width: 100%; margin-bottom:20px;">
            <el-table-column prop="name" label="信息项" width="180" align="center"> </el-table-column>

            <el-table-column prop="oldData" label="系统数据" width="180" align="center"> </el-table-column>

            <el-table-column prop="newData" label="调研数据" align="center"> </el-table-column>
          </el-table>
        </div>

        <p class="title">系统信息</p>
        <el-row>
          <el-col :span="24">
            <el-form-item label="医院名称：">
              <el-input v-model="toexamineForm.yymc" :disabled="notUser"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="所属地区：">
              <el-input v-model="cityVal" :disabled="notUser"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="详细地址：">
              <el-input v-model="toexamineForm.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :spam="24">
            <el-form-item label="定位地址：">
              <el-input
                v-model="addressKeyword"
                placeholder="请输入地址来直接查找相关位置"
                clearable
                style="margin-bottom:20px;z-index: 6000!important;"
                @keyup.enter.native="getAddressKeyword"
              >
                <el-button slot="append" icon="el-icon-search" @click="getAddressKeyword"></el-button>
              </el-input>
              <div id="container" style="width:100%; height:300px;"></div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经度：">
              <el-input v-model="toexamineForm.longitude" :disabled="notUser"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="纬度：">
              <el-input v-model="toexamineForm.latitude" :disabled="notUser"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="医院规模：">
              <el-select v-model="hospitalVal" :disabled="notUser" class="hospitalStyle">
                <el-option v-for="item in hospitalData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="医院性质：">
              <el-select v-model="yyxzVal" :disabled="notUser" class="hospitalXz">
                <el-option v-for="item in yyxzData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="院病床总数(张)：">
              <el-select v-model="ybczsVal" :disabled="notUser" class="hospitalStyle">
                <el-option v-for="item in ybczsData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
              <!--              <el-input-->
              <!--                v-model="toexamineForm.ybczs"-->
              <!--                :disabled="notUser"-->
              <!--              ></el-input>-->
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="医院官网：">
              <el-input v-model="toexamineForm.website" :disabled="notUser"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <p class="title">审批意见</p>
        <el-row>
          <el-col :span="24">
            <el-form-item label="审批意见：" prop="approvalopinion">
              <el-radio-group v-model="toexamineForm.approvalopinion">
                <el-radio label="1">采纳</el-radio>
                <el-radio label="2">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <div v-if="toexamineForm.approvalopinion == '2'">
          <el-row>
            <el-col :span="24">
              <el-form-item label="拒绝原因：" prop="xuanze">
                <el-radio-group v-model="toexamineForm.xuanze">
                  <el-radio label="医院规模更改有误">医院规模更改有误</el-radio>
                  <el-radio label="医院性质更改有误">医院性质更改有误</el-radio>
                  <el-radio label="新增医院地址不详无法定位">新增医院地址不详无法定位</el-radio>
                  <el-radio label="信息一致">信息一致</el-radio>
                  <el-radio label="其他">其他</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div v-if="toexamineForm.xuanze == '其他'">
          <el-row>
            <el-col :span="24">
              <el-form-item label="说明：">
                <el-input :rows="4" type="textarea" autosize placeholder="请输入内容" v-model="toexamineForm.approvalInfo"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="sureBtn('toexamineForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {updateByapproval, secondByApproval} from '@/api/wmtask';
import maps from 'qqmap';

export default {
  name: 'wmtask',

  data() {
    return {
      rules: {
        approvalopinion: [{required: true, message: '请选择审批意见', trigger: 'change'}],
        xuanze: [{required: true, message: '请选择拒绝原因', trigger: 'change'}]
      },
      showToexamine: true,
      toexamineForm: {
        xuanze: '',
        yymc: '',
        provinceTxt: '',
        address: '',
        longitude: '',
        latitude: '',
        yygm: '',
        yyxz: '',
        lxzj: '',
        ggyx: '',
        yzxm: '',
        yzlxfs: '',
        fyzxm: '',
        fyzlxfs: '',
        ywcczxm: '',
        ywcczlxfs: '',
        yjkzrxm: '',
        yjkzrlsfs: '',
        ybczs: 0,
        website: '',
        compareResult: '',
        approvalopinion: '',
        approvalInfo: ''
      },
      notUser: true,
      textarea1: '',
      radio: '',
      isCompareResult: true,
      toexamineForm: {},
      atypismData: [],
      wmTaskData: {},
      idVal: {},
      compareResultData: [
        {
          value: '1',
          label: '新增医院'
        },
        {
          value: '2',
          label: '信息不一致'
        },
        {
          value: '3',
          label: '信息一致'
        }
      ],
      hospitalData: [
        {
          value: '1',
          label: '三甲'
        },
        {
          value: '2',
          label: '三乙'
        },
        {
          value: '3',
          label: '三丙'
        },
        {
          value: '4',
          label: '二甲'
        },
        {
          value: '5',
          label: '二乙'
        },
        {
          value: '6',
          label: '二丙'
        },
        {
          value: '7',
          label: '一级'
        },
        {
          value: '8',
          label: '其他'
        }
      ],
      yyxzData: [
        {
          value: '1',
          label: '教学医院'
        },
        {
          value: '2',
          label: '综合医院'
        },
        {
          value: '3',
          label: '专科医院'
        },
        {
          value: '4',
          label: '民营医院'
        },
        {
          value: '10',
          label: '其他'
        }
      ],
      ybczsData: [
        {
          value: '1',
          label: '0~100'
        },
        {
          value: '2',
          label: '100~500'
        },
        {
          value: '3',
          label: '500+'
        }
      ],
      yyxzVal: '',
      ybczsVal: '',
      hospitalVal: '',
      compareResultVal: '',

      map: null,
      getAddress: null,
      getAddCode: null,
      addressKeyword: '',
      shopInfo: {
        lng: null,
        lat: null
      },

      newInfo: {
        // taskId: "",
        // compareResult: "",
        // approvalOpinion: "",
        // approvalInfo: ""
      },
      cityVal: '', // 所属地区
      current: ''
    };
  },
  mounted() {
    this.current = this.$route.query.current;
    let that = this;
    // 传过来的对象
    that.toexamineForm = that.$route.query.toexamineForm;
    that.atypismData = that.$route.query.atypismData;
    that.wmTaskData = that.$route.query.wmTaskData;
    that.newInfo = that.$route.query.newInfoData;

    // 所属地区展示省市区，拼接字符
    let provinceVal = that.toexamineForm.province == null ? '无' : that.toexamineForm.province;
    let cityVal = that.toexamineForm.city == null ? '无' : that.toexamineForm.city;
    let areaValue = that.toexamineForm.area == null ? '无' : that.toexamineForm.area;

    this.cityVal = provinceVal + '-' + cityVal + '-' + areaValue;

    // 要展示值
    that.yyxzVal = that.toexamineForm.yyxz;
    that.ybczsVal = that.toexamineForm.ybczs;
    that.hospitalVal = that.toexamineForm.yygm;
    that.compareResultVal = that.toexamineForm.compareResult;

    //  传过来的taskId
    that.idVal = that.$route.query.arg.taskId;

    console.log(that.idVal);
    // 页面初始化，地图里确定位置
    that.addressKeyword = this.cityVal + that.toexamineForm.address + that.toexamineForm.yymc;
    if (that.toexamineForm.compareResult == '1' || this.toexamineForm.compareResult == '3') {
      that.isCompareResult = false;
    } else {
      that.isCompareResult = true;
    }
    this.init();
  },
  methods: {
    init() {
      var that = this;
      maps.init('C4ABZ-HWE3X-5DW4J-ZO4GH-IQBWK-TXF2X', () => {
        var myLatlng = new qq.maps.LatLng(39.90490321996491, 116.39363072812557);
        var myOptions = {
          zoom: 16,
          center: myLatlng,
          mapTypeId: qq.maps.MapTypeId.ROADMAP
        };
        that.map = new qq.maps.Map(document.getElementById('container'), myOptions);
        //获取点击后的地址
        qq.maps.event.addListener(that.map, 'click', function(event) {
          // 获取点击后的地图坐标
          that.shopInfo.lng = event.latLng.getLng();
          that.shopInfo.lat = event.latLng.getLat();
          that.getAddressCode();
        });
        //调用地址显示地图位置并设置地址
        that.getAddress = new qq.maps.Geocoder({
          complete: function(result) {
            that.map.setCenter(result.detail.location);
            console.log(result.detail.location);
            that.shopInfo.lng = result.detail.location.lng;
            that.shopInfo.lat = result.detail.location.lat;
            that.toexamineForm.longitude = result.detail.location.lng;
            that.toexamineForm.latitude = result.detail.location.lat;
            var marker = new qq.maps.Marker({
              map: that.map,
              position: result.detail.location
            });
          }
        });
        //通过坐标来显示地图地址
        that.getAddCode = new qq.maps.Geocoder({
          complete: function(result) {
            that.addressKeyword = result.detail.address;
            that.toexamineForm.address = that.addressKeyword;
          }
        });
        if (undefined != this.city && '' != this.city) {
          this.getAddress.getLocation(this.city); //调用自带的接口
        }

        if (undefined != this.addressKeyword && '' != this.addressKeyword) {
          this.getAddress.getLocation(this.addressKeyword); //调用自带的接口
        }
      });
    },
    getAddressKeyword() {
      //通过getLocation();方法获取位置信息值
      if (undefined == this.getAddress) {
        this.init();
      } else {
        this.getAddress.getLocation(this.addressKeyword); //调用自带的接口
      }
    },
    // 通过坐标获得地址
    getAddressCode() {
      var lat = parseFloat(this.shopInfo.lat);
      var lng = parseFloat(this.shopInfo.lng);
      var latLng = new qq.maps.LatLng(lat, lng);

      //调用获取位置方法
      this.getAddCode.getAddress(latLng);
      this.toexamineForm.longitude = lng;
      this.toexamineForm.latitude = lat;
      console.log(latLng);
    },

    // 审核医院请求接口
    sureBtn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 展示使用的是info，传值使用newInfo

          this.newInfo.taskId = this.idVal;
          this.newInfo.compareResult = this.compareResultVal;
          this.newInfo.approvalOpinion = this.toexamineForm.approvalopinion;
          this.newInfo.approvalInfo = this.toexamineForm.approvalInfo;
          this.newInfo.address = this.toexamineForm.address;
          this.newInfo.longitude = this.toexamineForm.longitude;
          this.newInfo.latitude = this.toexamineForm.latitude;
          if (this.toexamineForm.xuanze != null && this.toexamineForm.xuanze != '') {
            if (this.toexamineForm.xuanze == '医院规模更改有误') {
              this.newInfo.approvalInfo = '医院规模更改有误';
            } else if (this.toexamineForm.xuanze == '医院性质更改有误') {
              this.newInfo.approvalInfo = '医院性质更改有误';
            } else if (this.toexamineForm.xuanze == '新增医院地址不详无法定位') {
              this.newInfo.approvalInfo = '新增医院地址不详无法定位';
            } else if (this.toexamineForm.xuanze == '信息一致') {
              this.newInfo.approvalInfo = '信息一致';
            } else if (this.toexamineForm.xuanze == '其他') {
              this.newInfo.approvalInfo = this.toexamineForm.approvalInfo;
            }
          }
          updateByapproval(this.newInfo)
            .then(response => {
              if (response.data.code == '0') {
                this.$router.$avueRouter.closeTag();
                (this.toexamineForm = {
                  approvalopinion: '',
                  approvalInfo: ''
                }),
                  this.$message.success('审批完毕');
                this.$router.push({path: '/admin/wmtask/auditCheck?current=' + this.current});
              }
            })
            .catch(() => {
              this.$message.error('请求异常');
            });
        } else {
          this.$message.error('请选择审批意见');
          return false;
        }
      });
    },
    // 取消按钮
    cancelBtn() {
      this.$router.$avueRouter.closeTag();
      this.showToexamine = false;
      this.$router.push({path: '/admin/wmtask/auditCheck?current=' + this.current});
      this.toexamineForm = {
        approvalopinion: '',
        approvalInfo: ''
      };
    },
    // esc取消
    handleClose(done) {
      done();
      this.$router.$avueRouter.closeTag();
      this.showToexamine = false;
      this.$router.push({path: '/admin/wmtask/auditCheck?current=' + this.current});
      this.toexamineForm = {
        approvalopinion: '',
        approvalInfo: ''
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.distpicker-address-wrapper {
  color: #000000 !important;
}

.title {
  font-size: 16px;
  font-weight: 600;
}
.atypismStyle {
  margin-left: 5px;
}
.distpicker-address-wrapper .address-header ul li.active {
  color: #000000 !important;
}
/*.el-dialog{*/
/*   width:60%!important;*/
/*   margin-left: 10px !important;*/
/* }*/
.auditH {
  z-index: 5000 !important;
}
.compareResultsty {
  width: 100%;
}
.hospitalStyle,
.hospitalXz {
  width: 230px;
}
</style>
