<template>
  <section class="AppMeetingChinaunion">
    <ai-list v-if="showList">
      <ai-title title="三会一课" isShowBottomBorder slot="title">
        <template #rightBtn>
          <ai-party :instance="instance" v-model="partyId" :topOrgId="topOrgId" :name.sync="partyOrgLabel"
                    style="display:inline-block" @origin="changeParty" customClicker
                    url="/app/partyOrganization/queryAllChildren">
            <el-input size="small" v-model="partyOrgLabel" readonly placeholder="选择党组织">
              <el-row slot="append" type="flex" class="partyPicker">
                <i class="iconfont icondangyuan"/>
                <div v-text="`切换党组织`"/>
              </el-row>
            </el-input>
          </ai-party>
          <el-button icon="iconfont iconNav_DataCenter" size="small" type="primary" @click="showStatistics()">会议统计
          </el-button>
          <!-- <el-button icon="iconfont iconSetting" size="small" type="primary" @click="toMeetSet()">设置</el-button> -->
        </template>
      </ai-title>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-select size="small" v-model="search.meetingClassification" placeholder="会议分类"
                       @change="$forceUpdate(),page.current=1,getAppThreeMeetingInfo()" clearable>
              <el-option v-for="(op,j) in dict.getDict('meetingClassification')" :key="j" :label="op.dictName"
                         :value="op.dictValue"/>
            </el-select>
            <el-select size="small" v-model="search.postStatus" placeholder="发布状态"
                       @change="$forceUpdate(),page.current=1,getAppThreeMeetingInfo()" clearable>
              <el-option v-for="(op,j) in dict.getDict('postStatus')" :key="j" :label="op.dictName"
                         :value="op.dictValue"/>
            </el-select>
            <ai-search label="学习日期">
              <el-date-picker size="small" placeholder="请选择" type="daterange"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              style="width: 258px;"
                              value-format="yyyy-MM-dd"
                              v-model="stuTime"
                              @change="page.current=1,getAppThreeMeetingInfo()"/>
            </ai-search>
          </template>
          <template #right>
            <el-input size="small" v-model="search.meetingAgenda" placeholder="会议标题/创建人"
                      suffix-icon="iconfont iconSearch" v-throttle="() => {page.current = 1, getAppThreeMeetingInfo()}" clearable @clear="search.meetingAgenda = '', page.current=1,getAppThreeMeetingInfo()"/>
          </template>
        </ai-search-bar>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" icon="iconfont iconAdd" v-if="$permissions('app_appthreemeetinginfo_edit')"
                       @click="add">添加
            </el-button>
            <!-- <el-button icon="iconfont iconAdd" v-if="$permissions('app_appthreemeetinginfo_makeup')"
                       @click="supplement">补录
            </el-button> -->
          </template>
        </ai-search-bar>
        <el-table ref="multipleTable" :data="tableData" style="margin-top:16px;"
                  header-cell-class-name="table-header"
                  tooltip-effect="dark" row-class-name="table-row" cell-class-name="table-cell">
          <el-table-column prop="meetingAgenda" label="会议名称" show-overflow-tooltip align="center">
            <div slot-scope="{row}">
              {{ row.meetingAgenda || "-" }}
            </div>
          </el-table-column>
          <el-table-column prop="meetingClassification" label="会议分类" align="center" show-overflow-tooltip>
            <div slot-scope="{row}" v-if="row.meetingClassification.length">
              <span v-for="(i,index) in dict.getDict('meetingClassification')" :key="index">
                <span v-for="(b,indexs) in row.meetingClassification" :key="indexs" v-if="i.dictValue == b">
                  {{ i.dictName }}
                  <span v-if="indexs < (row.meetingClassification.length - 1) ">,</span>
                </span>
              </span>
            </div>
            <div v-else>-</div>
          </el-table-column>
          <el-table-column prop="organizationName" label="所属组织" align="center">
            <template slot-scope="scope">
              <el-tooltip effect="light" placement="top" content="请进入详情查看更多组织"
                          v-if="scope.row.organizationName.length > 1">
                <span>{{ scope.row.organizationName[0] }}...</span>
              </el-tooltip>
              <span v-else>{{ scope.row.organizationName[0] || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="开始时间" align="center">
            <div slot-scope="{row}"> {{ row.startTime || '-' }}</div>
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间" align="center">
            <div slot-scope="{row}">
              {{ row.endTime || '-' }}
            </div>
          </el-table-column>
          <el-table-column prop="createUserName" label="创建人" align="center">
            <div slot-scope="{row}">
              {{ row.createUserName || "-" }}
            </div>
          </el-table-column>
          <el-table-column prop="postStatus" label="发布状态" align="center">
            <div slot-scope="{row}" :style="{color:color[row.postStatus]}">
              {{ dict.getLabel('postStatus', row.postStatus) || '-' }}
            </div>
          </el-table-column>
          <el-table-column prop="operate" label="操作" align="center" width="160px" fixed="right">
            <template slot-scope="{ row }">
              <div class="table-options">
                <el-button type="text" title="编辑" @click="gotoDetail(row)" v-if="row.postStatus=='0'">编辑</el-button>
                <el-button type="text" title="详情" @click="gotoDetail(row)" v-else>详情</el-button>
                <el-button type="text" title="删除" @click="delMeeting(row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
          <div slot="empty" class="no-data" style="height:160px;"/>
        </el-table>
        <div class="pagination">
          <el-pagination background
                         :current-page="page.current"
                         @current-change="handleCurrentChange"
                         @size-change="handleSizeChange"
                         layout="total,prev, pager, next,sizes, jumper"
                         :total="page.total"/>
        </div>
      </template>
    </ai-list>
    <div v-if="!$permissions('app_appthreemeetinginfo_detail')" class="no-permission"
         style="display: flex;flex-direction:column;align-items: center;justify-content: center;height: calc(100% - 148px);font-size: 14px;">
      <div style="height: 170px;"></div>
      <p>暂无使用该应用的权限</p>
    </div>
    <el-dialog :visible.sync="dialogTableVisible" title="会议数据统计" width="520px" class="mask label-110"
               :close-on-click-modal='false'>
      <div class="content input-240">
        <div class="flex">
          <el-date-picker
              v-model="searchYear"
              type="year"
              size="small"
              style="width: 200px; margin-right: 10px;"
              value-format="yyyy"
              @change="getMeetStatistics"
              placeholder="选择年份">
          </el-date-picker>
          <el-select style="width: 200px" v-model="searchMonth" placeholder="全部" size="small" clearable
                     class="timeSelect"
                     @change="getMeetStatistics">
            <el-option v-for="(op,j) in dict.getDict('monthList')" :key="j" :label="op.dictName"
                       :value="op.dictValue"/>
          </el-select>
        </div>
        <ul class="totalTitle">
          <li v-for="(item,index) in totalTitleList" :key="index">
            <span>{{ item.num }}</span>
            <span>{{ item.title }}</span>
          </li>
        </ul>
        <el-row type="flex" justify="space-between" style="margin-top: 40px;">
          <el-col style="width: 160px;height: 160px;">
            <pieChart :chart-data="pieChart" :colorList="colorList"></pieChart>
          </el-col>
          <el-col class="pieList">
            <ul>
              <li v-for="(item,index) in pieData.dataStatistics" :key="index">
                <div class="colorWrap">
                  <div :style="{background:colorList[index]}"></div>
                  <span>{{ item.name }}</span>
                </div>
                <span class="num">{{ item.v1 }}</span>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
      <div class="operation">
        <el-button class="delete-btn" @click="dialogTableVisible = false" size="mini">关闭</el-button>
      </div>
    </el-dialog>
    <appThreeMeetingUser :instance="instance" :dict="dict" v-if="showMeetingUser" :meetingId="meetingId"
                         :meetingStatus="meetingStatus"
                         :detail="detail"/>
    <add :instance="instance" :dict="dict" :detail="detail" v-if="showAdd"/>
    <meetingDetail :instance="instance" :dict="dict" :detail="detail" v-if="showDetail"/>
    <meetingSet :instance="instance" :dict="dict" :partyId="partyId" :partyName="search.partyName"
                v-if="showSet"/>
    <supplement :instance="instance" :dict="dict" v-if="showSupplement"/>
  </section>
</template>

<script>
import {mapState} from "vuex";
import moment from "dayjs";
import appThreeMeetingUser from "./components/appThreeMeetingUser";
import meetingSet from "./components/meetingSet";
import supplement from "./components/supplement";
import pieChart from "./components/pieChart";
import add from "./components/add";
import meetingDetail from "./components/meetingDetail";

export default {
  name: "AppMeetingChinaunion",
  label: "三会一课",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  components: {appThreeMeetingUser, meetingSet, supplement, pieChart, add, meetingDetail},
  data() {
    return {
      searchTime: '',
      tableData: [],
      search: {
        meetingAgenda: "",
        meetingClassification: "",
        postStatus: "",
        partyName: "",
        searchParamYM: '',
      },
      partyId: '',
      page: {
        current: 1,
        size: 10,
        total: 0,
      },
      detail: {},
      showSet: false,   //设置
      showMeetingUser: false,   //统计
      showSupplement: false, //补录
      showDetail: false,  //详情
      showAdd: false,    //添加
      showList: true,    //列表
      meetingId: "",//会议id
      meetingStatus: '', //会议状态
      partyType: '', //2表示支部可进支部党组织设置
      dialogTableVisible: false,
      topOrgId: '',
      stuTime: "",
      searchMonth: "",
      searchYear: String(new Date().getFullYear()),
      colorList: ["#FF4466", "#37A62B", "#4B87FE", "#FFAA44"],
      totalTitleList: [],
      pieData: {},
      pieChart: [],
      partyOrgLabel: ""
    }
  },
  methods: {
    add() {
      this.detail = {};
      this.showList = false;
      this.showAdd = true;
    },
    supplement() {
      this.showList = false;
      this.showSupplement = true;
    },
    showStatistics() {
      if (this.partyType != '2') {
        return this.$message.error("所属组织不是支部党组织");
      }
      this.dialogTableVisible = true
      this.getMeetStatistics();
    },
    /**
     * 获取统计
     * */
    getMeetStatistics() {
      this.instance.post(`/app/appthreemeetinginfo/statistics-branch-Per-month?month=${this.searchMonth}&year=${this.searchYear || ''}&partyOrgId=${this.partyId}`).then(res => {
        if (res && res.data) {
          const {type0, type1, type2, type3, total} = res.data;
          let chartData = [];
          this.totalTitleList = [
            {title: "共计会议", num: total},
            {title: "支部党员大会", num: type0},
            {title: "支部委员会", num: type1},
            {title: "党小组会", num: type2},
            {title: "党课", num: type3}
          ]
          res.data.dataStatistics.map(e => {
            chartData.push({value: e.v1, name: e.name})
          })
          this.pieChart = chartData;
          this.pieData = res.data;
        }
      })
    },
    /**
     * 切换党组织
     * @param e
     */
    changeParty(e) {
      if (!e.length) return
      this.partyType = e[0].partyType
      this.page.current = 1
      this.search.partyName = e[0].name
      this.getAppThreeMeetingInfo()
    },
    delMeeting(item) {
      this.$confirm(`是否要删除会议?`, {
        type: 'warning'
      }).then(() => {
        this.instance.post(`/app/appthreemeetinginfo/delete?ids=${item.id}`, null, {}).then(res => {
          if (res && res.code == 0) {
            this.$message.success("删除成功!")
            this.getAppThreeMeetingInfo()
          }
        })
      })
    },

    //分页
    handleCurrentChange(val) {
      this.page.current = val;
      this.getAppThreeMeetingInfo();
    },
    //分页
    handleSizeChange(val) {
      this.page.size = val
      this.page.current = 1
      this.getAppThreeMeetingInfo()
    },

    //重置
    resetSearch() {
      this.page.current = 1
      this.page.size = 10
      this.searchTime = ''
      this.stuTime = ""
      this.search.meetingClassification = "";
      this.search.postStatus = "";
      this.search.meetingAgenda = "";
      this.$nextTick(() => {
        this.getAppThreeMeetingInfo()
      })
    },
    //列表
    getAppThreeMeetingInfo() {
      const date = this.stuTime ? {
        startTimeStart: this.stuTime[0],
        startTimeEnd: this.stuTime[1]
      } : {}
      this.instance.post("/app/appthreemeetinginfo/list", null, {
        params: {
          ...this.search,
          ...this.page,
          ...date,
          organizationId: this.partyId,
        }
      }).then(res => {
        if (res && res.code == 0) {
          if (res.data.records.length) {
            res.data.records.map((item) => {
              item.organizationName = item.organizationName.split('/')
            })
          }
          this.tableData = res.data.records;
          this.page.total = res.data.total;
        }
      })
    },

    //返回
    goBack() {
      this.showSet = false;
      this.showMeetingUser = false;
      this.showSupplement = false;
      this.showDetail = false;
      this.showAdd = false;
      this.showList = true;
      this.getAppThreeMeetingInfo()
    },
    //跳转详请
    gotoDetail(row) {
      if (row.postStatus == '0') {
        this.detail = row;
        this.$nextTick(() => {
          this.showSet = false;
          this.showList = false;
          this.showDetail = false;
          this.showAdd = true;
        })
      } else {
        this.detail = row;

        this.$nextTick(() => {
          this.showSet = false;
          this.showList = false;
          this.showDetail = true;
        })
      }
//       this.detail = row;
//       this.showList = false;
//       this.showDetail = true;
    },
    /**
     * 设置
     * @returns {ElMessageComponent}
     */
    toMeetSet() {
      if (this.partyType != '2') {
        return this.$message.error("所属组织不是支部党组织");
      }
      this.showList = false;
      this.showDetail = false
      this.showSet = true;
    },
  },
  created() {
    this.topOrgId = this.user.info.organizationId;
    this.partyId = this.user.info.organizationId;
    this.search.partyName = this.user.info.organizationName;
    this.dict.load('meetingClassification', 'monthList', "meetingChangeYear", "postStatus").then(() => this.resetSearch());
  },
  computed: {
    ...mapState(['user']),
    color() {
      return ["#A722FF", "#FF8822", "#2266FF", "#999999"]
    },
  },
  filters: {
    formatTime(time) {
      return moment(time).format("YYYY-MM-DD HH:mm");
    }
  }
}
</script>
<style scoped lang="scss">
.AppMeetingChinaunion {
  height: 100%;

  ::v-deep .ai-partyorg {
    .el-dialog__header, .el-dialog__footer {
      line-height: 1 !important;
    }

    .el-input-group__append {
      background: rgba(245, 245, 245, 1);
    }

    .el-input__inner {
      direction: rtl;
    }

    .partyPicker {
      gap: 8px;
      align-items: center;
    }
  }

  .pieList {
    width: 215px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;

    ul {
      width: 100%;
      height: 100%;

      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;

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

          div {
            width: 8px;
            height: 8px;
          }

          span {
            font-size: 14px;
            color: #666666;
            line-height: 20px;
            margin-left: 16px;
          }
        }
      }

      .num {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
      }
    }
  }

  .btn {
    ::v-deep .el-button [class*=iconfont] + span {
      margin-left: 0;
    }
  }

  .timeSelect {
    .el-input__inner {
      width: 120px !important;
    }
  }

  .operation {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    line-height: 64px;
    display: flex;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background-color: #f3f6f9;
    box-shadow: inset 0 1px 0 0 #eeeeee;

    button {
      width: 92px;
      height: 32px;
      padding: 0 !important;
    }

    .delete-btn {
      background-color: #fff;
    }
  }

  .mask {
    .content {
      padding-bottom: 100px;
    }

    .el-table {
      border: 1px solid #D8E0E8;
      border-bottom: 0;
    }

    p {
      line-height: 28px;
      text-align: right;
      width: 88px;
      float: right;
      padding-bottom: 8px;
    }

    .el-dialog__header {
      text-align: center;
    }
  }

  .el-table thead.is-group th {
    background: #fff;
  }

  .totalTitle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 16px 0;
    border-bottom: 1px solid rgb(238, 238, 238);

    li {
      display: flex;
      flex-direction: column;
      align-items: center;

      span:nth-child(1) {
        font-size: 24px;
        font-weight: bold;
        color: #E03416;
        line-height: 28px;
      }

      span:nth-child(2) {
        font-size: 12px;
        color: #666666;
        line-height: 16px;
      }
    }
  }

}
</style>



