<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-col :span="6" class="list" v-for="(item, index) in list" :key="index" @click.native="link(item)">
              <el-col :span="24" class="name">
                <i class="iconfont" :class="item.icon"></i>
                <p>{{ item.name }}</p>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="common two">
            <el-col :span="12" class="left">
              <top topText="高企政策服务" :userMore="false"></top>
              <list type="1" :list="oneList"></list>
            </el-col>
            <el-col :span="12" class="left"
              ><top topText="创新劵服务" :userMore="false"></top>
              <list type="2" :list="twoList"></list>
            </el-col>
          </el-col>
          <el-col :span="24" class="common thr">
            <el-col :span="24" class="left"
              ><top topText="科技成果服务" :userMore="false"></top>
              <list type="3" :list="thrList"></list>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="dialogTitle" class="dialog2" :visible.sync="dialog2" width="30%" :before-close="dialog2Colse">
      <el-form :model="form2" :rules="rulesForm2" ref="form2" label-width="80px">
        <el-form-item label="用户账号" prop="institution_code">
          <el-input v-model="form2.institution_code" placeholder="请输入用户账号" maxlength="18"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="passwd">
          <el-input v-model="form2.passwd" placeholder="请输入登录密码" type="password" show-password></el-input>
        </el-form-item>
        <el-col :span="24" class="btn">
          <el-button type="primary" size="mini" @click="onSubmit2('form2')">登录</el-button>
        </el-col>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import top from './parts/top.vue';
import list from './parts/list.vue';
import { btnList } from './btnList.js';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: organization } = createNamespacedHelpers('organization');
const { mapActions: policy } = createNamespacedHelpers('policy');
const { mapActions: ticket } = createNamespacedHelpers('ticket');
const { mapActions: achieveApply } = createNamespacedHelpers('achieveApply');
export default {
  name: 'index',
  props: {},
  components: { top, list },
  data: function () {
    return {
      list: btnList,
      // 高企政策服务
      dialog2: false,
      form2: {},
      rulesForm2: {
        phone: [{ required: true, message: '请输入用户账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
      },
      dialogTitle: '高企政策服务',
      dialogType: undefined,
      // 高企政策服务-列表
      oneList: [],
      // 创新券服务-列表
      twoList: [
        {
          company: '22',
        },
        {
          company: '十条数据',
        },
      ],
      // 科技成果评价服务-列表
      thrList: [
        {
          basic: {
            achieve_name: '成果名称',
            achieve_date: '2021-01-01 01:00:00',
            achieve_type: '城固了捏',
            achieve_form: '成果形式',
          },
        },
        {
          basic: {
            achieve_name: '10条数据',
            achieve_date: '2021-01-01 01:00:00',
            achieve_type: '城固了捏',
            achieve_form: '成果形式',
          },
        },
      ],
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...policy({ policyQuery: 'query' }),
    ...ticket({ ticketQuery: 'query' }),
    ...achieveApply({ achieveApplyQuery: 'query' }),
    ...organization(['login', 'fetch']),
    link(data) {
      const { type, name } = data;
      if (type == '1') {
        window.open('http://www.jlkjxm.com');
      } else if (type == '2') {
        this.dialog2 = true;
        this.dialogTitle = name;
        this.dialogType = type;
      } else if (type == '3') {
        this.dialog2 = true;
        this.dialogTitle = name;
        this.dialogType = type;
      } else if (type == '4') {
        window.open('http://broadcast.waityou24.cn/liveAchieve');
      } else if (type == '5') {
        this.$router.push({ path: '/service/register', query: { type: type } });
      } else if (type == '6') {
        this.$router.push({ path: '/service/register', query: { type: type } });
      } else if (type == '7') {
        this.$router.push({ path: '/service/register', query: { type: type } });
      }
    },
    // 高企政策服务
    dialog2Colse() {
      this.dialog2 = false;
    },
    // 高企政策服务登录
    onSubmit2(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = this.form2;
          const res = await this.login(data);
          if (this.$checkRes(res)) {
            if (this.dialogType === '2') this.$router.push({ path: '/service/policy' });
            if (this.dialogType === '3') this.$router.push({ path: '/service/ticket' });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 查询列表信息
    async search({ skip = 0, limit = 10, ...info } = {}) {
      // 高企政策服务
      let res = await this.policyQuery({ skip, limit: 7, status: 1, ...info });
      if (this.$checkRes(res)) this.$set(this, `oneList`, res.data);
      res = await this.ticketQuery({ skip, limit: 7, status: 1, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `twoList`, res.data);
      }
      // 创新券
      res = await this.ticketQuery({ skip, limit: 7, status: 4, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `twoList`, res.data);
      }
      // 科技成果评价
      res = await this.achieveApplyQuery({ skip, limit: 12, status: 6, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `thrList`, res.data);
      }
    },
    // 查询企业详细信息
    async searchCompany(data) {
      let res = await this.fetch(data.user_id);
      if (this.$checkRes(res)) {
        data.company = res.data.name;
        return data;
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  min-height: 500px;
  margin: 20px 0 0 0;
  .one {
    margin: 0 0 20px 0;
    .list {
      width: 13.5%;
      height: 130px;
      margin: 0 10px 0px 0;
      text-align: center;
      padding: 20px 0;
      border-radius: 5px;
      box-shadow: 0 0 5px #409eff;
      .name {
        .iconfont {
          font-size: 40px;
        }
        p {
          font-size: 16px;
          font-weight: bold;
          margin: 10px 0 0 0;
        }
      }
    }
    .list:nth-child(7) {
      margin: 0 0 0 0;
    }
    .list:hover {
      cursor: pointer;
      .name {
        p {
          color: #6495ed;
        }
      }
    }
  }
  .common {
    margin: 0 0 10px 0;
    .left {
      width: 49.5%;
      height: 500px;
      overflow: hidden;
      box-shadow: 0 0 4px #409eff;
      border-radius: 10px;
      margin: 0 10px 10px 0;
      padding: 10px;
    }
    .left:nth-child(2n) {
      margin: 0 0 10px 0;
    }
  }
  .thr {
    width: 100%;
    .left {
      width: 100%;
    }
  }
}
.dialog2 {
  .btn {
    text-align: center;
    padding: 10px 0;
  }
  /deep/.el-dialog__body {
    height: 180px;
  }
}
</style>
