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

        <el-row>
          <el-col :span="24">
            <el-form-item label="对比结果：">
              <el-select
                v-model="compareResultVal"
                :disabled="notUser"
                class="compareStyle"
              >
                <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="businessCompareList"
            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="12">
            <el-form-item label="商业公司名称：">
              <el-input
                v-model="toexamineForm.gsmc"
                :disabled="notUser"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商业公司地址：">
              <el-input
                v-model="toexamineForm.sygsdz"
                :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="companyVal"
                :disabled="notUser"
                style="width: 100%"
              >
                <el-option
                  v-for="item in companyData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <el-input
                v-model="toexamineForm.gsgm"
                :disabled="notUser"
              ></el-input> -->
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="社会统一信用代码：">
              <el-input
                v-model="toexamineForm.shyshxydm"
                :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.gszcd"
                :disabled="notUser"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="注册资本：">
              <el-input
                v-model="toexamineForm.zczb"
                :disabled="notUser"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="CSP证书编号：">
              <el-input
                v-model="toexamineForm.gspzsbh"
                :disabled="notUser"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="法定代表人：">
              <el-input
                v-model="toexamineForm.frdb"
                :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="toexamineForm.medicineTraceability"
                :disabled="notUser"
                style="width: 100%"
              >
                <el-option
                  v-for="item in medicineTraceabilityOptions"
                  :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-input
                v-model="toexamineForm.medicineTraceabilityOther"
                :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.zjl"-->
        <!--                :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.cjbmfzrxm"-->
        <!--                :disabled="notUser"-->
        <!--              ></el-input>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->

        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="联系方式：">-->
        <!--              <el-input-->
        <!--                v-model="toexamineForm.cjbmfzrlxfs"-->
        <!--                :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.cgbmdjrxm"-->
        <!--                :disabled="notUser"-->
        <!--              ></el-input>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->

        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="联系方式：">-->
        <!--              <el-input-->
        <!--                v-model="toexamineForm.cgbmdjrlxfs"-->
        <!--                :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.xsbmfzrxm"-->
        <!--                :disabled="notUser"-->
        <!--              ></el-input>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->

        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="联系方式：">-->
        <!--              <el-input-->
        <!--                v-model="toexamineForm.xsbmfzrlxfs"-->
        <!--                :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.xsbmdjrxm"-->
        <!--                :disabled="notUser"-->
        <!--              ></el-input>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->

        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="联系方式：">-->
        <!--              <el-input-->
        <!--                v-model="toexamineForm.xsbmdjrlxfs"-->
        <!--                :disabled="notUser"-->
        <!--              ></el-input>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->

        <el-row>
          <el-col :span="24">
            <el-form-item label="公司简介：">
              <el-input
                :rows="4"
                type="textarea"
                autosize
                :disabled="notUser"
                v-model="toexamineForm.gsjj"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="经营优势：">
              <el-input
                :rows="4"
                type="textarea"
                autosize
                :disabled="notUser"
                v-model="toexamineForm.jyys"
              ></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>

        <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>
      </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 { businessApproval } from "@/api/wmtask";
import maps from "qqmap";
import { getDictType } from "@/api/common";

export default {
  name: "wmtask",
  data() {
    return {
      rules: {
        approvalopinion: [
          { required: true, message: "请选择审批意见", trigger: "change" }
        ]
      },
      showToexamine: true,
      toexamineForm: {
        gsmc: "",
        city: "",
        address: "",
        longitude: "",
        latitude: "",
        gsgm: "",
        shyshxydm: "",
        gszcd: "",
        zczb: "",
        gspzsbh: "",
        frdb: "",
        zjl: "",
        cjbmfzrxm: "",
        cjbmfzrlxfs: "",
        cgbmdjrxm: "",
        cgbmdjrlxfs: "",
        xsbmfzrxm: "",
        xsbmfzrlxfs: "",
        xsbmdjrxm: "",
        xsbmdjrlxfs: "",
        gsjj: "",
        jyys: "",
        compareResult: "",
        approvalopinion: "",
        approvalInfo: ""
      },
      notUser: true,
      isCompareResult: true,
      businessCompareList: [],
      businessWmTask: {},
      idVal: {},
      compareResultData: [
        {
          value: "1",
          label: "新增商业公司"
        },
        {
          value: "2",
          label: "信息不一致"
        },
        {
          value: "3",
          label: "信息一致"
        }
      ],
      companyData: [
        {
          value: "1",
          label: "全国百强"
        },
        {
          value: "2",
          label: "城市前三"
        },
        {
          value: "3",
          label: "托管商业"
        },
        {
          value: "4",
          label: "其他"
        }
      ],
      companyVal: "",
      compareResultVal: "",

      map: null,
      getAddress: null,
      getAddCode: null,
      addressKeyword: "",
      address: "",
      shopInfo: {
        lng: null,
        lat: null
      },
      pharmacyNewInfo: {},
      newInfo: {},
      areaVal: "",
      current: "",
      medicineTraceabilityOptions: [] // 产品信息化追溯体系 options
    };
  },
  mounted() {
    this.current = this.$route.query.current;
    let that = this;
    that.toexamineForm = that.$route.query.businessInfo;
    that.businessWmTask = that.$route.query.businessWmTask;
    that.businessCompareList = that.$route.query.businessCompareList;
    that.idVal = that.$route.query.arg.taskId;
    that.newInfo = that.$route.query.businessNewInfo;

    // 所属地区展示省市区，拼接字符
    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;
    that.areaVal = provinceVal + "-" + cityVal + "-" + areaValue;
    // 匹配值
    that.compareResultVal = that.businessWmTask.compareResult;
    that.companyVal = that.toexamineForm.gsgm;

    if (that.compareResultVal === "1" || that.compareResultVal === "3") {
      that.isCompareResult = false;
    } else {
      that.isCompareResult = true;
    }
    // this.addressKeyword = that.toexamineForm.gszcd
    this.init();
    this.getDictType(); // 产品信息化追溯体系
  },
  methods: {
    init() {
      var that = this;
      maps.init("C4ABZ-HWE3X-5DW4J-ZO4GH-IQBWK-TXF2X", () => {
        var myLatlng = new qq.maps.LatLng(
          22.547931568083015,
          114.1306221485138
        );
        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;
            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;
    },

    // 确定按钮
    sureBtn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.newInfo.taskId = this.idVal;
          this.newInfo.compareResult = this.businessWmTask.compareResult;
          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;
          businessApproval(this.newInfo)
            .then(response => {
              if (response.data.code == "0") {
                this.$router.$avueRouter.closeTag();
                this.$router.push({
                  path: "/admin/wmtask/auditCheck?current=" + this.current
                });
                this.showToexamine = false;
                this.toexamineForm = {
                  approvalopinion: "",
                  approvalInfo: ""
                };
                this.$message.success("审核完毕");
              }
            })
            .catch(() => {
              this.$message.error("请求异常");
            });
        } else {
          this.$message.error("请选择审批意见");
          return false;
        }
      });
    },

    // 取消按钮
    cancelBtn() {
      this.$router.$avueRouter.closeTag();
      this.$router.push({
        path: "/admin/wmtask/auditCheck?current=" + this.current
      });
      this.showToexamine = false;
      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: ""
      };
    },
    getDictType() {
      getDictType({ type: "medicine_traceability" }).then(res => {
        this.medicineTraceabilityOptions = res.data.data;
      });
    }
  }
};
</script>

<style>
.compareStyle {
  width: 100%;
}
/*.companySty .el-input.is-disabled{*/
/*  width:230px !important;*/
/*}*/
</style>
