<template>
  <div class="policy-selector">
    <div class="policy-selector-header">
      <h3>选择策略</h3>
    </div>
    <div class="policy-selector-content" style="max-height:50vh;overflow-y: auto;">
      <el-table
        :data="celueData"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
      >
        <el-table-column label="选择" type="selection" width="55"></el-table-column>
        <el-table-column label="策略名称" prop="policyName" min-width="200"></el-table-column>
        <el-table-column label="适用资源" prop="applicableResources" min-width="100"></el-table-column>
        <el-table-column label="经营类型" prop="businessType" min-width="150"></el-table-column>
        <el-table-column label="租金价格" prop="rentalPrice" min-width="150"></el-table-column>
        <el-table-column label="租期" prop="leaseTerm" min-width="100"></el-table-column>
        <el-table-column label="是否出租" prop="planningObjectives" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.isrental == '0' ? '否' : '是' }}
          </template>
        </el-table-column>
        <el-table-column label="是否自营" prop="planningObjectives" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.isSelfOperated == '0' ? '否' : '是' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="policy-selector-footer" style="display: flex; justify-content: flex-end; align-items: center;">
      <el-button @click="confirm" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
      <el-button @click="cancel" class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button>
    </div>
  </div>
</template>

<script>
  import {
    ceGetAll
  } from '@/api/sam.js'
export default {
  name: 'PolicySelector',
  data() {
    return {
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
      selectedRows: [],
      celueData: []
    };
  },
  async created() {
    const celue = await ceGetAll(this.pageindex)
    this.celueData = celue.data.content
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    confirm() {
      this.$emit('minSev', this.selectedRows);
    },
    cancel() {
      this.$emit('mingClose');
    }
  }
};
</script>

<style scoped>
.policy-selector {
  padding: 30px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.policy-selector-header {
  text-align: left;
  margin-bottom: 20px;
}

.policy-selector-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.policy-selector-content {
  margin-bottom: 20px;
}

.policy-selector-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>