<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="发布诉求" left-arrow />

    <view class="line"></view>
    <van-notice-bar color="#FF7F34" background="#FEF9F5" text="* 属于必填项" />

    <view class="card">
      <view class="flex flex-between issue-pd">
        <view class="card-title">
          关联企业
          <text class="red ml-10">*</text>
        </view>
        <view>
          <text v-if="appealDetails !== null">{{ appealDetails.enterpriseName }}</text>
          <block v-if="appealDetails === null">
            <text class="card-placeholder">您未关联企业,去关联</text>
            <van-icon @tap.native="headleEnterprise" color="#FE3B53" class="ml-10" name="add-o" size="16px" />
          </block>
        </view>
      </view>

      <view class="flex flex-between issue-pd">
        <view class="card-title">
          诉求类型
          <text class="red ml-10">*</text>
        </view>
        <view class="flex">
          <picker @change="bindPickerChange" data-name="appealType" data-index="appealTypeIndex"
            data-list="appealTypeList" range-key="label" :value="value" :range="appealTypeList">
            <view class="picker">
              <text v-if="form.appealType !== ''" class="card-placeholder"
                style="color: #000000">{{ appealTypeList[appealTypeIndex].label }}</text>
              <text v-if="form.appealType === ''" class="card-placeholder" style="color: #999">请选择诉求类型</text>
              <van-icon color="#FE3B53" class="ml-10" name="arrow-down" size="16px" />
            </view>
          </picker>
        </view>
      </view>

      <view class="issue-pd">
        <view class="card-title">
          诉求标题
          <text class="red ml-10">*</text>
        </view>
        <view class="mt-16">
          <input class="card-content" type="text" @input="headleInput" :value="form.appealTitle" data-name="appealTitle"
            maxlength="30" placeholder="请输入诉求标题，文字不超过30字" />
        </view>
      </view>

      <view class="issue-pd">
        <view class="card-title">
          诉求内容
          <text class="red ml-10">*</text>
        </view>
        <view class="mt-16">
          <textarea class="textarea card-content" :value="form.appealContent" @input="headleInput"
            data-name="appealContent" maxlength="200" placeholder="请输入诉求内容，文字不超过200字"></textarea>
          <view class="mt-16">
            <van-uploader :after-read="afterRead" :before-delete="beforeDelete" v-model="fileList" :deletable="true"
            max-count="9">
            <van-icon name="/src/images/camera.png" size="80px" />
          </van-uploader>

            <view class="mt-16 card-block">附件不超过9个，每个大小不超过1M</view>
          </view>
        </view>
      </view>

      <view class="issue-pd">
        <view class="card-title">
          姓名
          <text class="red ml-10">*</text>
        </view>
        <view class="mt-16">
          <input class="flex1 textarea-class" @input="headleInput" v-model="form.name" type="text" data-name="name"
            placeholder="请输入姓名" />
        </view>
      </view>

      <view class="issue-pd">
        <view class="card-title">当前位置</view>
        <view class="mt-16 flex flex-between">
          <input style="width: 90%" class="card-content" type="text" :value="form.appealCurrentLocation" disabled
            maxlength="30" placeholder="请选择地址" />
          <van-icon name="location-o" @click="headleAdress" color="#FE3B53" size="16px" />
        </view>
      </view>
      <view class="flex flex-between issue-pd">
        <view class="card-title">同意对外展示我的诉求</view>
        <view class="flex">
          <picker @change="bindPickerChange" data-name="appealShowFlag" data-index="appealShowFlagIndex"
            data-list="agreeList" range-key="label" :value="value" :range="agreeList">
            <view class="picker">
              <text v-if="form.appealShowFlag !== ''" class="card-placeholder"
                style="color: #000000">{{ agreeList[appealShowFlagIndex].label }}</text>
              <text v-if="form.appealShowFlag === ''" class="card-placeholder" style="color: #999">请选择诉求类型</text>
              <van-icon color="#FE3B53" class="ml-10" name="arrow-down" size="16px" />
            </view>
          </picker>
        </view>
      </view>
      <view class="mt-50">
        <van-button @click="submit" block color="#FE3B53">提交信息</van-button>
      </view>
    </view>
  </view>
</template>

<script>
  // const app = getApp();
  // const { enterprise, publicApi } = app.globalData.api;
  import * as publicApi from '@/api/publicApi';
  import * as enterprise from '@/api/enterprise';
  export default {
    components: {},
    data() {
      return {
        userInfoCount: null,
        userId: uni.getStorageSync('userInfoData').userId,
        fileList: [],
        appealEnclosure: [],
        appealTypeList: [],

        agreeList: [{
            label: '是',
            value: 1
          },
          {
            label: '否',
            value: 0
          }
        ],

        enterpriseList: [],
        enterpriseIndex: '',
        appealTypeIndex: '',
        appealShowFlagIndex: 0,
        appealDetails: null,

        form: {
          appealShowFlag: 1,
          enterpriseId: '',
          appealType: '',
          appealTitle: '',
          appealContent: '',
          // appealCurrentLocation: app.globalData.config.locationInfo.name,
          name: ''
        },

        checked: false,
        name: '',
        value: '',
        label: ''
      };
    },
    async onLoad(optons) {
      if (Object.keys(optons).length) {
        this.getEnterprise(optons.id);
      }
    },
    async onShow() {
      const userInfoCount = uni.getStorageSync('userInfoCount');
      this.userInfoCount =userInfoCount
      this.getEnterpriseList();
      this.getAppelaTypeList();
      const userInfoData = uni.getStorageSync('userInfoData');
      this.userId = userInfoData.userId
    },
    methods: {
      // 获取企业列表
      async getEnterpriseList() {
        const res = await enterprise.getEnterpriseListApi({
          userId: this.userId
        });
        if (res.data) {
          this.enterpriseList = res.data.list
        }
      },

      // 字典请求-诉求类型
      async getAppelaTypeList() {
        const res = await publicApi.getDictDataApi({
          dictType: 'appeal_type'
        });
        if (res.data) {
          this.appealTypeList = res.data.list
        }
      },

      // 跳转关联企业页面
      headleEnterprise() {
        // 暂时去除跳转实名认证
        // const {
        //   userInfoCount
        // } = this.data;
        // if (userInfoCount.realNameAuthFlag === 1) {
        uni.navigateTo({
          url: `/packages/enterprise/pages/relation-enterprise/relation-enterprise`
        });
        // } else if (userInfoCount.realNameAuthFlag === 0) {
        //   wx.navigateTo({
        //     url: `/packages/enterprise/pages/enterprise-certification/enterprise-certification`,
        //   });
        // }
      },

      // 选择对应的诉求类型
      bindPickerChange: function(e) {
        let {
          name
        } = e.target.dataset;
        const {
          index
        } = e.target.dataset;
        const Listname = e.target.dataset.list;
        console.log(e)
        const List = this[Listname];
        name = `form.${name}`;
        console.log(Listname)
        this.form.appealType =List[e.detail.value].value

        this[index] = e.detail.value
        this[name] = Listname === 'enterpriseList' ? List[e.detail.value].id : List[e.detail.value].value
      },

      beforeDelete(file, dateil) {
      this.appealEnclosure.splice(dateil.index, 1);
      this.fileList.splice(dateil.index, 1)
    },

      async afterRead(event) {
      const {
        file
      } = event;

      const res = await getApp().globalData.upload({ file });
      if (res.code !== 0) {
        uni.showToast({
          title: '上传图片失败',
          icon: 'none'
        });
        return false;
      }
      this.appealEnclosure.push(res.data);
    },

      // 输入框重新赋值
      headleInput(event) {
        const {
          value
        } = event.detail;
        const {
          name
        } = event.currentTarget.dataset;
        this.form[name] = value;
        this.form = {
          ...this.form
        }
        this[name] = this[name]
        console.log(this.form);
      },

      // 选择地址
      headleAdress() {
        this.form =
           {
            ...this.form,
            // appealCurrentLocation: app.globalData.config.locationInfo.name
          }
      },

      // 获得企业详情
      async getEnterprise(id) {
        const res = await enterprise.getEnterpriseApi(id);
        if (res.data) {
          this.appealDetails= res.data
          this.form = {
              ...this.form,
              enterpriseId: res.data.id
            }
        }
      },

      // 提交form表单
      async submit() {
        const {
          enterpriseId,
          appealType,
          appealTitle,
          appealContent,
          appealCurrentLocation,
          name
        } = this.form;
        const params = {
          enterpriseId,
          appealType,
          appealTitle,
          appealContent,
          appealCurrentLocation,
          appealProcessStatus: 1,
          appealShowFlag: 1,
          appealEnclosure: this.appealEnclosure,
          name
        };
        if (enterpriseId === '' || appealType === '' || appealTitle === '' || appealContent === '') {
          /* eslint-disable*/
          uni.showToast({
            title: enterpriseId == '' ?
              '请选择关联企业' : appealType == '' ?
              '请选择选择诉求类型' : appealType == '' ?
              '请输入诉求标题' : appealType == '' ?
              '请输入诉求内容' : '带*属于必填项',
            icon: 'none'
          });
          return false;
        }
        const res = await enterprise.createAppealApi(params);
        if (res.code !== 0) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          return;
        }
        uni.showToast({
          title: '发布诉求成功',
          icon: 'none'
        });
        uni.redirectTo({
          url: '/packages/enterprise/pages/my-appeal/my-appeal'
        });
      }
    }
  };
</script>
<style lang="less">
  .ml-10 {
    margin-left: 20rpx;
  }

  .mt-16 {
    margin-top: 16rpx;
  }

  .mt-50 {
    margin-top: 50rpx;
  }

  .mt-100 {
    margin-top: 100rpx;
  }

  page {
    background-color: #fff;
  }

  .van-notice-bar {
    --notice-bar-padding: 0 40rpx;
  }

  .line {
    width: 100%;
    height: 36rpx;
  }

  .card {
    padding: 0rpx 40rpx 40rpx 40rpx;
  }

  .issue-pd {
    align-items: center;
    padding: 42rpx 0;
    border-bottom: 1px solid #efefef;
  }

  .card-title {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
  }

  .card-content {
    font-size: 32rpx;
    font-weight: 400;
  }

  .card-placeholder {
    font-size: 32rpx;
    font-weight: 400;
    color: #999999;
  }

  .card-block {
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
  }

  .textarea {
    width: 100%;
    height: 180rpx;
    line-height: 40rpx;
  }

  .ic-check {
    width: 32rpx;
    height: 32rpx;
    margin-right: 20rpx;
  }
</style>