<template>
  <div class="home_wrapper">
    <!--  头部开始  -->
    <van-nav-bar
      title="发布商品"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <!--  头部结束  -->


    <!--  内容开始  -->
    <van-form @submit="submitForm" ref="formData" show-error :show-error-message="false">
      <div class="main">
        <van-field label="产品名称" required :rules="[{ required: true }]" v-model="supplyDemand.supplyDemandName" input-align="right" placeholder="请输入产品名称" />
        <!--      <van-field label="产品类型" v-model="supplyDemand.productType" input-align="right" placeholder="请输入产品类型" />-->
        <van-field
          readonly
          clickable
          required
          :rules="[{ required: true , message:'请选择产品类型'}]"
          v-model="productType"
          label="产品类型"
          placeholder="请选择产品类型"
          @click="showProductType = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
        />

        <van-popup v-model="showProductType" round position="bottom">
          <!--        v-model="cascaderValue"-->
          <van-cascader
            title="请选择产品类型"
            :options="productList"
            @close="showProductType = false"
            @finish="onConfirmProductType"
            :field-names="fieldNames"
          />
        </van-popup>

        <!--      <van-field label="二级分类" v-model="supplyDemand.supplyDemandType" input-align="right" placeholder="请输入二级分类" />-->
        <van-field label="产品规格" v-model="supplyDemand.specification" input-align="right" placeholder="请输入产品规格" />
        <!--      <van-field label="所属主体" v-model="supplyDemand.bodyType" input-align="right" placeholder="请输入所属主体" />-->
<!--        <van-field-->
<!--          readonly-->
<!--          clickable-->
<!--          required-->
<!--          :rules="[{ required: true , message:'请选择所属主体'}]"-->
<!--          v-model="supplyDemand.entityName"-->
<!--          label="所属主体"-->
<!--          placeholder="请选择所属主体"-->
<!--          @click="showBodyType = true"-->
<!--          input-align="right"-->
<!--          right-icon="arrow-down"-->
<!--          label-width="auto"-->
<!--        />-->
<!--        <van-popup v-model="showBodyType" position="bottom">-->
<!--          <van-picker-->
<!--            show-toolbar-->
<!--            :columns="detailListOptions"-->
<!--            value-key="entityName"-->
<!--            @confirm="onConfirmProjectType"-->
<!--            @cancel="showBodyType = false"-->
<!--          />-->
<!--        </van-popup>-->

<!--        <van-field label="所属主体" required :rules="[{ required: true }]" v-model="supplyDemand.entityName" input-align="right" placeholder="请输入所属主体" />-->


        <van-field label="单价" required :rules="[{ required: true }]" v-model="supplyDemand.unitPrice" type="number" input-align="right" placeholder="请输入单价" />
        <van-field label="数量" v-model="supplyDemand.number" type="digit" input-align="right" placeholder="请输入数量" />
        <van-field label="单位" required :rules="[{ required: true }]" v-model="supplyDemand.unit" input-align="right" placeholder="请输入单位" />
        <van-field label="联系电话" required :rules="[{ required: true }]" v-model="supplyDemand.supplyDemandTal" type="digit" input-align="right" placeholder="请输入联系电话" />
        <van-field label="联系人" required :rules="[{ required: true }]" v-model="supplyDemand.linker" input-align="right" placeholder="请输入联系人" />

        <van-field
          readonly
          clickable
          required
          :rules="[{ required: true , message:'请选择服务区域'}]"
          v-model="supplyDemand.serviceDeptName"
          label="服务区域"
          placeholder="请选择服务区域"
          @click="showDeptId = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
        />
        <van-popup v-model="showDeptId" position="bottom" get-container="body">
          <van-cascader
            v-model="villageValue"
            title="请选择"
            :options="deptOptions"
            @close="showDeptId = false"
            @change="onConfirmDept"
            active-color="#1989fa"
            :field-names="hcAreaInfoFieldName"
          />
        </van-popup>

        <van-field label="地址" v-model="supplyDemand.address" input-align="right" placeholder="请输入地址" />
        <van-field label="简介" required :rules="[{ required: true }]" v-model="supplyDemand.introduction" type="textarea" autosize input-align="right" placeholder="请输入简介" />
        <van-field label="详情" v-model="supplyDemand.particulars" type="textarea" autosize input-align="right" placeholder="请输入详情" />
        <van-field label="图片" :border="false" input-align="right" readonly />
        <div style="padding: 0 4% 2vh;">
          <van-uploader v-model="supplyDemand.supplyMasterMapList" :after-read="afterReadEvidenceForm" :before-delete="deleteFileEvidenceForm" />
        </div>
      </div>

      <div class="main">
        <MapGisTag ref="clickLoading" :showBtn="true" :message="supplyDemand.theGeom" v-on:formSubmit="MapTag"></MapGisTag>
      </div>

      <div class="main_btn">
        <p @click="publishStatus = '3',$refs.formData.submit()">发布</p>
        <p @click="publishStatus = '2',$refs.formData.submit()">存稿</p>
      </div>
    </van-form>
    <!--  内容结束  -->
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import {commonUpload, productTypes, supplyDemandAdd, treeselect,detailList} from "@/api/agriculturalTrusteeship";
  import MapGisTag from "@/components/Map/MapGisTagDTG";
  export default {
    name: "agriculturalTrusteeshipSocializationRelease",
    components: {
      MapGisTag
    },
    data() {
      return {
        activeKey: 0,
        active: 0,
        loading: false,
        finished: false,
        showProductType: false,
        showBodyType: false,
        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
        zoom: 15, //地图展示级别
        showDialog:false,
        supplyDemand:{
          entityName:JSON.parse(Cookies.get("ServiceInformation")).entityName,
          entityId:Cookies.get("ACCESS-SESSION-ID"),
          theGeom:''
        },
        productType:'',
        bodyType:'',
        projectTypeOptions:[],
        productList:[],
        productList1:[],
        demandTypeOptions:[],
        productTypeOptions:[],
        supplyMasterMapArr:[],
        bodyTypeOptions:[],
        fieldNames : {
          text: 'dictName',
          value: 'id',
          children: 'children',
        },
        publishStatus:'',
        deptOptions:[],
        deptName:'张村',
        showDeptId:false,
        villageValue : '',
        hcAreaInfoFieldName: {
          text: "label",
          value: "value",
          children: "children",
        },
        detailListOptions:[]
      };
    },
    created() {
      let query = {
        parentId : '',
        tree : true
      }
      let query1 = {
        tree : true
      }
      productTypes(query).then(response => {
        this.productList = response.data;
      });
      productTypes(query1).then(response => {
        this.productList1 = response.data;
      });
      this.getDicts("newBusinessEntity_statistics_project").then(response => {
        for (var i = 0; i < response.data.length; i++) {
          this.projectTypeOptions.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});
        }
        this.bodyTypeOptions = response.data;
      });
      this.getDicts("publish_status").then(response => {
        for (var i = 0; i < response.data.length; i++) {
          this.projectTypeOptions.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});
        }
        this.bodyTypeOptions = response.data;
      });
      treeselect().then(res=>{
        if (res.code == 200) {
          this.deptOptions = res.data;
        }
      })
      detailList().then(res=>{
        if (res.code == 200) {
          this.detailListOptions = res.rows;
        }
      })
      this.mapClickLoading();
    },
    methods: {
      //获取自己返回值
      /** 查找地图中定位点 */
      MapTag: function (data) {
        this.supplyDemand.theGeom = data;
      },
      //每个查看修改，新增  方法下引用下面方法
      mapClickLoading(){
        setTimeout(() => {
          this.$refs.clickLoading.pointPaceCountryDarw();
        }, 500);
      },
      onConfirmProductType({ selectedOptions }){
        this.supplyDemand.productType = selectedOptions[selectedOptions.length-1].id;
        this.productType = selectedOptions.map((option) => option.dictName).join('/');
        this.showProductType = false;
      },
      onConfirmProjectType(data){
        this.supplyDemand.entityName = data.entityName;
        this.supplyDemand.entityId = data.id;
        this.showBodyType = false;
      },
      afterReadEvidenceForm(file){
        let params1 = new FormData();
        params1.append("file", file.file);
        commonUpload(params1).then((r1) => {
          // this.tEnforceSamplingGoodsList[index].attachement.push(r1.fileName);
          console.log(r1)
          this.supplyMasterMapArr.push(r1.fileName)
        })
      },
      deleteFileEvidenceForm(file,detail) {
        this.supplyMasterMapArr.splice(detail.index,1);
        this.supplyDemand.supplyMasterMapList.splice(detail.index,1);
      },
      submitForm(publishStatus){
        this.supplyDemand.supplyMasterMap = this.supplyMasterMapArr.join(',')
        this.supplyDemand.supplyDemandType = '1';
        this.supplyDemand.publishStatus = this.publishStatus;
        supplyDemandAdd(this.supplyDemand).then((res) => {
          if(res.code=="200"){
            if (this.publishStatus == '3'){
              this.$notify({ type: 'success', message: '发布成功' });
            }else{
              this.$notify({ type: 'success', message: '存稿成功' });
            }

            setTimeout(function(){
              history.back(-1);
            },2000)
          }
        })
      },
      //选择案件属地
      onConfirmDept({ selectedOptions }){
        this.supplyDemand.serviceDeptId = selectedOptions[selectedOptions.length-1].value;
        this.supplyDemand.serviceDeptName = selectedOptions[selectedOptions.length-1].label;
        // this.showDeptId = false
      },
    },
  }
</script>
<style scoped lang="scss">
.home_wrapper{
  background: #F6F6F6;
  min-height: 100vh;
}
.main{
  width: 92%;
  margin: 0 auto;
  margin-top: 2vh;
  border-radius: 10PX;
  overflow: hidden;
  background-color: #FFF;
}
  .main_btn{
    display: flex;
    justify-content: space-around;
    padding: 4vh 0;
    p{
      font-size: .4rem;
      width: 35%;
      text-align: center;
      padding: 10PX 0;
      border-radius: 5rem;
      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
      &:nth-child(1){
        background: #334281;
        color: #ffffff;
      }
      &:nth-child(2){
        background: #D1D5E4;
        color: #334281;
      }
    }
  }
</style>
