<template>
    <div class="full-body">
        <div class="head-search" ref="headSearch">
            <div class="left">
                <el-tabs v-model="activeName" @tab-click="handleTabsClick">
                    <el-tab-pane
                        v-for="item in conditions"
                        :key="item.id"
                        :name="item.value"
                    >
                        <span slot="label" class="flex">
                            <i
                                v-if="item.color"
                                class="icon-circle"
                                :style="{backgroundColor: item.color}"
                            ></i>
                            {{ item.title }}
                        </span>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="center">
                <el-form
                    ref="form"
                    @submit.native.prevent
                    :model="params"
                    label-width="90px"
                >
                    <el-form-item :label="$t('reportManagement.searchName')">
                        <el-input
                            v-if="$i18n.locale === 'zh-CN'"
                            v-model="params.name"
                            clearable
                            :placeholder="this.$t('navigator.searchTip')"
                            @keyup.enter.native="handleSearch"
                        ></el-input>
                        <el-input
                            v-else
                            v-model="params.nameEn"
                            clearable
                            :placeholder="this.$t('navigator.searchTip')"
                            @keyup.enter.native="handleSearch"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <el-button
                    icon="el-icon-search"
                    type="primary"
                    plain
                    class="addBtn"
                    @click="handleSearch"
                >
                    {{ this.$t('common.search') }}
                </el-button>
            </div>
        </div>
        <div
            class="container"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.1)"
        >
            <template v-if="reportFormData.length !== 0">
                <div class="card-container">
                    <div
                        class="item-card"
                        v-for="(item, index) in reportFormData"
                        :key="index"
                        @click="handleReportOpen(item)"
                    >
                        <div class="item-card-header">
                            <div v-if="item.flag == 0" class="item_img">
                                <i
                                    v-if="item.fillRate === 'dynamic'"
                                    class="cqlt-icon cqlt-icon-jibao"
                                ></i>
                                <i
                                    v-else-if="item.fillRate === 'day'"
                                    class="cqlt-icon cqlt-icon-ribao1"
                                ></i>
                                <i
                                    v-else-if="item.fillRate === 'week'"
                                    class="cqlt-icon cqlt-icon-zhoubao1"
                                ></i>
                                <i
                                    v-else-if="item.fillRate === 'month'"
                                    class="cqlt-icon cqlt-icon-yuebao1"
                                ></i>
                                <i
                                    v-else-if="item.fillRate === 'quarter'"
                                    class="cqlt-icon cqlt-icon-jidu"
                                ></i>
                                <i
                                    v-else-if="item.fillRate === 'year'"
                                    class="cqlt-icon cqlt-icon-nian"
                                ></i>
                            </div>
                            <div v-else class="item_img bg">
                                <i
                                    v-if="item.fillRate === 'dynamic'"
                                    class="cqlt-icon cqlt-icon-jibao"
                                ></i>
                                <i
                                    v-else-if="item.fillRate === 'day'"
                                    class="cqlt-icon cqlt-icon-ribao1"
                                ></i>
                                <i
                                    v-else-if="item.fillRate === 'week'"
                                    class="cqlt-icon cqlt-icon-zhoubao1"
                                ></i>
                                <i
                                    v-else-if="item.fillRate === 'month'"
                                    class="cqlt-icon cqlt-icon-yuebao1"
                                ></i>
                                <i
                                    v-else-if="item.fillRate === 'quarter'"
                                    class="cqlt-icon cqlt-icon-jidu"
                                ></i>
                                <i
                                    v-else-if="item.fillRate === 'year'"
                                    class="cqlt-icon cqlt-icon-nian"
                                ></i>
                            </div>
                            <div class="info">
                                <div class="item_text">
                                    <el-link
                                        :underline="false"
                                        v-if="$i18n.locale === 'zh-CN'"
                                        >{{ item.name }}</el-link
                                    >
                                    <el-link :underline="false" v-else>{{
                                        item.nameEn
                                    }}</el-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <el-empty
                v-if="!reportFormData.length && loading == false"
                :description="$t('common.empty')"
            ></el-empty>
        </div>
    </div>
</template>

<script>
import utils from '@/utils.js'
import moduleRouter from '@/module_components.js'
export default {
    name: 'ReportFilling',
    components: {},
    data() {
        return {
            components: null,
            conditions: [],
            searchForm: {},
            params: {
                business: '',
                tyep: 3,
                name: '',
                nameEn: '',
            },
            reportFormData: [],
            loading: false,
        }
    },
    created() {
        this.components = moduleRouter
        this.getHeaderTabsData() // 获取头部tabs数据
        this.getReportForm(this.params) // 获取表报数据
    },
    methods: {
        handleReportOpen(item) {
			
            let hasComp = false
            for (let key in this.components) {
                if (key == item.key) {
                    hasComp = true
                }
            }
            if (hasComp) {
                this.$router.push({
                    name: 'reportFillingComp',
                    query: {
                        id: item.id,
                        business: item.business, // 传递所属业务
                    },
                })
            } else {
                this.$message.warning(this.$t('common.noTemplate'))
            }
        },
        // 获取报表数据
        getReportForm(params) {
            this.loading = true
            this.$http
                .post('${portal}/qfReportAuthority/v1/myAuthList', params)
                .then((res) => {
                    // console.log(res, 'data')
                    let data =
                        (res && res.data && res.data.value && res.data.value) ||
                        []
                    this.reportFormData = data // = this.format(data)
                    this.loading = false
                })
        },
        handleTabsClick(tab) {
            if (tab.name == 'all') {
                this.params.business = ''
            } else {
                this.params.business = tab.name
            }
            this.getReportForm(this.params) // 获取表报数据
        },
        handleSearch() {
            this.getReportForm(this.params) // 获取表报数据
        },
        // 获取头部tabs数据
        getHeaderTabsData() {
            let data = []
            if (this.$i18n.locale === 'zh-CN') {
                data.push(
                    {
                        name: '全部',
                        value: 'all',
                    },
                    ...utils.getDictItemsFromCache('ssyw')
                )
            } else {
                data.push(
                    {
                        name: 'All',
                        value: 'all',
                    },
                    ...utils.getDictItemsFromCache('ssyw_en')
                )
            }
            let colors = [
                '#0147eb',
                '#f04444',
                '#f7931a',
                '#8a3aed',
                '#0147eb',
                '#627eea',
            ]
            console.log(utils.getDictItemsFromCache('ssyw'), 'data')
            // return
            data.forEach((item, index) => {
                item.color = colors[index]
                item.title = item.name
            })
            this.activeName = data[0].value
            this.conditions = data
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/common.scss';
.full-body {
  // background: #fff;
}

.cqlt-icon {
  color: #fff;
  font-size: 48px;
}

.cqlt-icon-jidu {
  font-size: 38px;
}
/deep/ .el-pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/deep/ .el-progress.is-success .el-progress-bar__inner {
  background: repeating-linear-gradient(
    120deg,
    #71b945,
    #71b945 0.26042vw,
    #8dc76a 0.26042vw,
    #8dc76a 0.625vw
  );
}

/deep/ .el-progress-bar__outer {
  height: 4px !important;
}

/deep/ .el-link {
  display: block;
}

/deep/ .el-tabs__nav-wrap::after {
  display: none;
}

/deep/ .el-tabs,
/deep/ .el-tabs__header,
/deep/ .el-tabs__nav-wrap,
/deep/ .el-tabs__nav-scroll,
/deep/ .el-tabs__nav {
  height: 100%;
}

/deep/ .el-tabs__nav {
  padding-top: 20px;
  box-sizing: border-box;
}

/deep/ .el-input__inner {
  // border: none;
}

.text-style {
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 17px;
  letter-spacing: 0px;
  color: #0147eb;
}

.icon {
  width: 40px;
  height: 40px;
}

.flex {
  display: flex;
  align-items: center;
}

.mar-left-10 {
  margin-left: 10px;
}

.link-btn {
  display: flex;
  flex-direction: column;

  .item {
    display: flex;
    margin-top: 5px;
  }
}
.head-search {
  width: 100%;
  height: 78px;
  background-color: #fff;
  // box-shadow: 0px 12px 23px 0px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 25px;
  box-sizing: border-box;

  .el-tabs {
    width: inherit;
  }

  .left {
    flex: 3;
    height: 100%;
    display: flex;
    align-items: center;

    .icon-circle {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
    }

    .more-btn {
      margin-left: 32px;

      &:hover {
        cursor: pointer;

        i {
          color: #0147eb;
        }
      }

      span {
        font-family: Microsoft YaHei;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 19px;
        letter-spacing: 0px;
        color: #545454;
      }

      i {
        color: #545454;
      }
    }
  }

  .center {
    display: flex;
    justify-content: center;
    align-content: center;
    /deep/ .el-form-item--small.el-form-item {
      margin-bottom: 0;
    }
    /deep/ .el-form {
      height: 40px;
    }
    .addBtn {
      margin-left: 10px;
    }
  }
}
.text-common-style {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 17px;
  letter-spacing: 0px;
  color: #ffffff;
}
.container {
  height: calc(100% - 86px);
  border-radius: 20px;
  padding-left: 30px;
  overflow: auto;
  background-color: #fff;
  margin-top: 10px;
  .item_title {
    height: 19px;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 19px;
    letter-spacing: 0px;
    color: #409eff;
    margin-top: 16px;
    font-weight: 700;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -10px;
      display: inline-block;
      width: 4px;
      height: 14px;
      line-height: 14px;
      background: #409eff;
    }
  }
}
/deep/ .el-loading-mask {
  border-radius: 20px;
}
/deep/ .el-empty {
  height: 100%;
  background: #fff;
  //   margin-top: 10px;
  border-radius: 20px;
}

.card-container {
  margin: 16px 0 8px 0;
  display: flex;
  flex-wrap: wrap;
  padding-right: 20px;
  .item-card {
    padding: 20px;
    padding-bottom: 10px;
    box-sizing: border-box;
    background-color: #f5f6fa;
    border-radius: 20px;
    // box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #fff;
    &:hover {
      cursor: pointer;
      border: 1px dashed #409eff;
    }
    .item-card-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .item_img {
        width: 80px;
        height: 80px;
        background: #909399;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .bg {
        background-color: #409eff;
      }
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 16px;
      height: 80px;
      .operation-btn {
        display: flex;
        justify-content: flex-end;

        .operation-btn-link /deep/ i::before {
          font-size: 14px;
        }

        /deep/ .el-link [class*='el-icon-'] + span {
          margin-left: 0;
          font-size: 14px;
        }
      }
      .item_text {
        flex: 1;
        font-family: Microsoft YaHei;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #545454;
        display: flex;
        align-items: center;

        /deep/ .el-link--inner {
          font-size: 16px;
        }

        div:nth-child(2) {
          display: flex;
          // justify-content: space-between;
        }
        .tag {
          margin-right: 5px;
        }
      }
    }

    .option-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item {
        display: flex;
        align-items: center;
      }

      .cloumn-btn-link {
        // margin-right: 16px;
        font-size: 12px;
        color: #409eff;
      }
    }
  }
}

.dialog-header {
  display: flex;
  height: 50px;
  align-items: center;
  margin-bottom: 10px;
  .line {
    margin: 0 30px;
  }
  .btn-plus {
    margin-right: 10px;
  }
  /deep/ .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 680px) {
  .item-card {
    width: 100%;
    margin-right: 0;
  }
}

@media screen and (min-width: 681px) {
  .item-card {
    width: calc(50% - 4px);
  }

  .item-card:nth-child(2n) {
    margin-right: 0px;
  }
}

@media screen and (min-width: 1040px) {
  .item-card {
    width: calc(33% - 4px);
  }

  .item-card:nth-child(2n) {
    margin-right: 10px;
  }

  .item-card:nth-child(2n + 1) {
    margin-right: 10px;
  }

  .item-card:nth-child(3n) {
    margin-right: 0;
  }

  .item-card:nth-child(3n + 1) {
    margin-right: 10px;
  }
}

@media screen and (min-width: 1350px) {
  .item-card {
    width: calc(25% - 8px);
  }

  .item-card:nth-child(2n) {
    margin-right: 10px;
  }

  .item-card:nth-child(2n + 1) {
    margin-right: 10px;
  }

  .item-card:nth-child(3n + 1) {
    margin-right: 10px;
  }

  .item-card:nth-child(3n) {
    margin-right: 10px;
  }

  .item-card:nth-child(4n + 1) {
    margin-right: 10px;
  }

  .item-card:nth-child(4n) {
    margin-right: 0px;
  }
}

@media screen and (min-width: 1710px) {
  .item-card {
    width: calc(20% - 8px);
  }

  .item-card:nth-child(2n) {
    margin-right: 10px;
  }

  .item-card:nth-child(3n) {
    margin-right: 10px;
  }

  .item-card:nth-child(4n) {
    margin-right: 10px;
  }

  .item-card:nth-child(5n) {
    margin-right: 0;
  }
}
</style>
<style scoped>
.main-container > .el-card[data-v-063de322] {
  background: #fff !important;
}
</style>
