<template>
  <div>
    <a-button @click="showModal" type="primary">统计信息填报</a-button>
    <a-modal
      :confirm-loading="confirmLoading"
      :ok-text="okText"
      :title="title"
      :visible="visible"
      @cancel="handleCancel"
      @ok="handleSubmit"
      width="50%"
    >
      <!-- 公司信息 -->
      <a-form :form="form" v-if="current === 0">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="公司名称"
          required
        >
          <a-auto-complete
            @search="handleSearchTasks"
            @select="onSelect"
            placeholder="公司名称"
            v-model="company"
          >
            <template slot="dataSource">
              <a-select-option
                :key="task.id"
                :value="`${task.id}`"
                v-for="task in dataSource"
              >{{ task.company }}</a-select-option>
            </template>
          </a-auto-complete>
        </a-form-item>

        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="联系人"
        >
          <span>{{ companyInfo.name || '暂无' }}</span>
        </a-form-item>

        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="联系方式"
        >
          <span>{{ companyInfo.phone || '暂无' }}</span>
        </a-form-item>

        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="时间"
          required
        >
          <a-date-picker
            :open="yearShowOne"
            @openChange="openChangeOne"
            @panelChange="panelChangeOne"
            format="YYYY"
            mode="year"
            placeholder="请选择年份"
            v-model="platform.time"
          />
        </a-form-item>

        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="季度"
          required
        >
          <a-select @select="onSelectQuarter" placeholder="请选择季度">
            <a-select-option
              :key="quarter.id"
              :value="quarter.id"
              v-for="quarter in quarters"
            >{{ quarter.value }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <!-- 知识产权综合情况（项） -->
      <a-form :form="form" v-if="current === 1">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="实用本年期初数"
        >
          <a-input-number
            placeholder="请输入实用本年期初数..."
            style="width:100%"
            v-model.trim="platform.practicalNumber"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="实用当年新增"
        >
          <a-input-number
            placeholder="请输入实用当年新增..."
            style="width:100%"
            v-model.trim="platform.practicalIncrease"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="发明本年期初数"
        >
          <a-input-number
            placeholder="请输入发明本年期初数..."
            style="width:100%"
            v-model.trim="platform.inventionNumber"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="发明当年新增"
        >
          <a-input-number
            placeholder="请输入发明当年新增..."
            style="width:100%"
            v-model.trim="platform.inventionIncrease"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="软著本年期初数"
        >
          <a-input-number
            placeholder="请输入软著本年期初数..."
            style="width:100%"
            v-model.trim="platform.softNumber"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="软著当年新增"
        >
          <a-input-number
            placeholder="请输入软著当年新增..."
            style="width:100%"
            v-model.trim="platform.softIncrease"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="商标本年期初数"
        >
          <a-input-number
            placeholder="请输入商标本年期初数..."
            style="width:100%"
            v-model.trim="platform.brandNumber"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="商标当年新增"
        >
          <a-input-number
            placeholder="请输入商标当年新增..."
            style="width:100%"
            v-model.trim="platform.brandIncrease"
          />
        </a-form-item>
      </a-form>
      <!-- 综合职工情况（个） -->
      <a-form :form="form" v-if="current === 2">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="人员总数"
        >
          <a-input-number
            placeholder="请输入人员总数..."
            style="width:100%"
            v-model.trim="platform.totalNumber"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="科技人员"
        >
          <a-input-number
            placeholder="请输入科技人员..."
            style="width:100%"
            v-model.trim="platform.sciencePersonnel"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="大专以上人数"
        >
          <a-input-number
            placeholder="请输入大专以上人数..."
            style="width:100%"
            v-model.trim="platform.collegeaboveNumber"
          />
        </a-form-item>
      </a-form>
      <!-- 综合经济指标 -->
      <a-form :form="form" v-if="current === 3">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="资产总额"
        >
          <a-input-number
            :precision="precision"
            placeholder="请输入资产总额..."
            step="0.01"
            style="width:100%"
            v-model.trim="platform.totalAssets"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="营业收入"
        >
          <a-input-number
            :precision="precision"
            placeholder="请输入营业收入..."
            step="0.01"
            style="width:100%"
            v-model.trim="platform.operatingIncome"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="利润总额"
        >
          <a-input-number
            :precision="precision"
            placeholder="请输入利润总额..."
            step="0.01"
            style="width:100%"
            v-model.trim="platform.profitTotal"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="上缴税金"
        >
          <a-input-number
            :precision="precision"
            placeholder="请输入上缴税金..."
            step="0.01"
            style="width:100%"
            v-model.trim="platform.taxes"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="研发费用"
        >
          <a-input-number
            :precision="precision"
            placeholder="请输入研发费用..."
            step="0.01"
            style="width:100%"
            v-model.trim="platform.researchCosts"
          />
        </a-form-item>
      </a-form>
      <!-- 服务情况（次） -->
      <a-form :form="form" v-if="current === 4">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="代理代办"
        >
          <a-input-number
            placeholder="请输入代理代办..."
            style="width:100%"
            v-model.trim="platform.agentService"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="政策推送"
        >
          <a-input-number
            placeholder="请输入政策推送..."
            style="width:100%"
            v-model.trim="platform.policyPush"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="双创活动"
        >
          <a-input-number
            placeholder="请输入双创活动..."
            style="width:100%"
            v-model.trim="platform.doubleActivities"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="政策辅导"
        >
          <a-input-number
            placeholder="请输入政策辅导..."
            style="width:100%"
            v-model.trim="platform.policyGuidance"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="项目申报"
        >
          <a-input-number
            placeholder="请输入项目申报..."
            style="width:100%"
            v-model.trim="platform.projectDeclaration"
          />
        </a-form-item>
      </a-form>

      <a-steps :current="current">
        <a-step @click="current = 0" style="cursor: pointer">
          <template slot="title">
            <span v-if="current === 0">Waiting...</span>
            <span v-else>完成</span>
          </template>
          <span slot="description">公司信息</span>
        </a-step>
        <a-step
          :title="current > 1 ? '完成' : 'Waiting...'"
          @click="current = 1"
          description="知识产权综合情况（项）"
          style="cursor: pointer"
        />
        <a-step
          :title="current > 2 ? '完成' : 'Waiting...'"
          @click="current = 2"
          description="综合职工情况（个）"
          style="cursor: pointer"
        />
        <a-step
          :title="current > 3 ? '完成' : 'Waiting...'"
          @click="current = 3"
          description="综合经济指标"
          style="cursor: pointer"
        />
        <a-step
          :title="current > 4 ? '完成' : 'Waiting...'"
          @click="current = 4"
          description="服务情况（次）"
          style="cursor: pointer"
        />
      </a-steps>
    </a-modal>
  </div>
</template>

<script>
import debounce from 'lodash/debounce';
import { mapState, mapMutations } from 'vuex';
import { addEnterprise, queryInfo } from 'config/api';

const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 18 },
};
const formTailLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18, offset: 6 },
};
export default {
  name: 'SettledModel',
  props: {
    placeType: {
      type: Number,
      default: null,
    },
  },
  data() {
    this.handleSearchTasks = debounce(this.handleSearchTasks, 800);
    return {
      form: this.$form.createForm(this, { name: 'submit' }),
      visible: false,
      current: 0,
      fileList: [],
      title: '统计信息填报',
      formItemLayout,
      formTailLayout,
      confirmLoading: false,
      okText: '下一步',
      platform: {
        // 公司信息
        placeId: '', // 公司id
        time: null, // 时间
        quarter: '', // 季度
        // 知识产权综合情况（项）
        practicalNumber: '', // 实用本年期初数
        practicalIncrease: '', // 实用当年新增
        inventionNumber: '', // 发明本年期初数
        inventionIncrease: '', // 发明当年新增
        softNumber: '', // 软著本年期初数
        softIncrease: '', // 软著当年新增
        brandNumber: '', // 商标本年期初数
        brandIncrease: '', // 商标当年新增
        // 综合职工情况（个）
        totalNumber: '', // 人员总数
        sciencePersonnel: '', // 科技人员
        collegeaboveNumber: '', // 大专以上人数
        // 服务情况（次）
        agentService: '', // 代理代办
        policyPush: '', // 政策推送
        doubleActivities: '', // 双创活动
        policyGuidance: '', // 政策辅导
        projectDeclaration: '', // 项目申报
      },
      company: '',
      dataSource: [],
      companyInfo: {
        company: '', // 公司名称
        name: '', // 联系人
        phone: '', // 联系方式
      }, // 公司信息
      yearShowOne: false,
      quarters: [
        { id: 1, value: '第一季度' },
        { id: 2, value: '第二季度' },
        { id: 3, value: '第三季度' },
        { id: 4, value: '第四季度' },
      ],
      precision: 2,
    };
  },
  computed: mapState('user', ['picCode']),

  watch: {
    current(val) {
      if (val === 4) {
        this.okText = '完成';
      } else {
        this.okText = '下一步';
      }
    },
  },

  methods: {
    ...mapMutations('home', ['setPagePath']),
    // 显示表单输入框
    showModal() {
      const anyringToken = sessionStorage.getItem('anyringToken');
      if (!anyringToken) {
        this.setPagePath(this.$route.path);
        this.$router.push('/login');
        this.$message.warning('请先登录');
      } else {
        this.visible = true;
      }
    },
    // 取消显示
    handleCancel(e) {
      this.visible = false;
    },

    // 模糊搜索 选择公司信息
    async handleSearchTasks() {
      try {
        const params = { param: { company: this.company, placeType: this.placeType } };
        const res = await queryInfo(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.dataSource = data;
        } else {
          this.$message.error(msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
    onSelect(value) {
      const item = this.dataSource.find(item => item.id === +value);
      this.platform.placeId = item.id;
      this.companyInfo.company = item.company;
      this.companyInfo.name = item.name;
      this.companyInfo.phone = item.phone;
    },

    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      //status是打开或关闭的状态
      if (status) {
        this.yearShowOne = true;
      }
    },
    // 时间选择
    panelChangeOne(value) {
      this.platform.time = this.$moment(value).format('YYYY');
      this.yearShowOne = false;
    },

    // 季度选择
    onSelectQuarter(value) {
      this.platform.quarter = value;
    },

    // 点击确定
    handleSubmit() {
      const { placeId, time, quarter } = this.platform;
      if (!placeId) {
        this.$message.error('请输入公司名称');
        this.current = 0;
        return;
      }
      if (!time) {
        this.$message.error('请选择时间');
        this.current = 0;
        return;
      }
      if (!quarter) {
        this.$message.error('请选择季度');
        this.current = 0;
        return;
      }

      if (this.okText === '下一步') {
        this.current += 1;
      } else {
        this.addSettled();
      }
    },

    /**
     * 添加企业统计信息填报表
     * @param {object} params 提交的数据
     */
    async addSettled() {
      this.confirmLoading = true;
      try {
        const params = { param: {} };
        params.param = { ...this.platform };
        const res = await addEnterprise(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.$message.success('添加成功');
          this.visible = false;
          for (let key in this.platform) {
            this.platform[key] = '';
          }
          for (let key in this.companyInfo) {
            this.companyInfo[key] = '';
          }
          this.company = '';
          this.current = 0;
        } else {
          this.$message.error(msg || '添加失败');
        }
        this.confirmLoading = false;
      } catch (error) {
        console.log('error: ', error);
        this.confirmLoading = false;
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.must-color {
  color: red;
}

.code_img {
  height: 32px;
  width: 120px;
}
</style>
