<template>
  <div class="data-alignment">
    <div class="alignment-header">
      <el-row>
        <el-col :span="18">
          <div class="title">数据调整</div>
        </el-col>
        <el-col :span="3">
          <el-button class="add-button" size="small" type="primary">保存修改</el-button>
        </el-col>
        <el-col :span="3">
          <el-button class="add-button" size="small" type="primary">取消</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="form">
      <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
        <el-form ref="serchForm" :model="formInline" label-width="100px" style="width:100%;">
          <el-col :span="6">
            <el-form-item label="参与项目状态:">
              <el-select
                v-model="formInline.pregStatus"
                size="small"
                style="width: 100%;"
                placeholder="请选择项目状态"
              >
                <el-option
                  v-for="(item,index) in preStaSelect"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="统计状态:">
              <el-select
                v-model="formInline.mathStatus"
                size="small"
                style="width: 100%;"
                placeholder="请选择统计状态"
              >
                <el-option
                  v-for="(item,index) in mathStaSelect"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="data-main">
      <el-row class="select" type="flex" justify="end">
        <el-col :span="3">
          <div class="title">已选中{{multipleSelection.length}}条数据</div>
        </el-col>
        <el-col :span="3">
          <el-button class="add-button" size="small" @click="includeMath">全部归入统计</el-button>
        </el-col>
        <el-col :span="3">
          <el-button class="add-button" size="small" @click="removeMath">全部移出统计</el-button>
        </el-col>
      </el-row>
      <el-table
        border
        center
        ref="multipleTable"
        :data="mathDate"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="姓名" min-width="80"></el-table-column>
        <el-table-column prop="joinStatus" label="项目参与状态" width="120"></el-table-column>
        <el-table-column prop="progress" label="所属机构" min-width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="desk" label="科室" show-overflow-tooltip></el-table-column>
        <el-table-column prop="rank" label="级别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="province" label="省/直辖市" show-overflow-tooltip></el-table-column>
        <el-table-column prop="city" label="市" show-overflow-tooltip></el-table-column>
        <el-table-column prop="district" label="区/县" show-overflow-tooltip></el-table-column>
        <el-table-column prop="address" label="乡镇/街道" show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="180">
          <template slot-scope="scope">
            <el-radio v-model="scope.row.radio" label="1" @change="handleClick(scope.row)">归入统计</el-radio>
            <el-radio v-model="scope.row.radio" label="2"  @change="handleClick(scope.row)">移除统计</el-radio>
          </template>
        </el-table-column>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png">
            <p>没有查询到相关结果</p>
          </div>
        </div>
      </el-table>
    </div>
    <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
  </div>
</template>

<script>
let vm
export default {
  data() {
    return {
      formInline: {
        pregStatus: "",
        mathStatus: ""
      },
      preStaSelect: [
        //项目状态
        {
          label: "未参与项目",
          value: "1"
        },
        {
          label: "参与项目",
          value: "2"
        },
        {
          label: "完成项目",
          value: "3"
        }
      ],
      mathStaSelect: [
        //项目状态
        {
          label: "归入统计",
          value: "1"
        },
        {
          label: "移除统计",
          value: "2"
        }
      ],
      mathDate: [
        {
          name: "张医生",
          joinStatus: "完成项目",
          progress: "谈西社区卫生服务站",
          desk: "全科",
          rank: "一甲",
          province: "河北省",
          city: "石家庄市",
          district: "长安区",
          address: "建北街道",
          radio: '1'
        }
      ],
      multipleSelection: [], //被选中的行
      totalRows: 0, //数据总数
      pageNo: 1, //当前是第几页
      pageSize: 20 //页面总数
    };
  },
  created() {
    vm = this
  },
  methods: {
    // 将选中行放入数组
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    handleClick(row) {
      console.log(row);
    },
     // 更改数据显示数量
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 换页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 全部统计
    includeMath() {
      if (!this.multipleSelection) {
        return;
      }
      this.multipleSelection.forEach(el => {
        el.radio = '1'
      })
    },
    // 全部不统计
    removeMath() {
      if (!this.multipleSelection) {
        return;
      }
      this.multipleSelection.forEach(el => {
        el.radio = '2'
      })
    }
  }
};
</script>

<style lang='scss' rel='stylesheet/scss'>
.data-alignment {
  background: #fff;
  .alignment-header {
    padding: 20px;
    margin: 0 30px;
    border-bottom: 1px solid #000;
  }
  .form {
    padding: 30px;
  }
  .data-main {
    padding: 0 40px;
    .select {
      margin-bottom: 30px;
    }
  }
}
</style>
