<template>
  <div>
    <div><h2>自由工作</h2></div>
    <div class="count-list">
      <div class="count-item" style="margin-right: 20px">
        <span>对接中：{{ count.inPending }}</span>
        <span>待托管费用：{{ count.inPay }}</span>
        <span>开发中：{{ count.inDeveloping }}</span>
      </div>
    </div>
    <div style="margin-bottom: 15px">
      <el-select v-model="selectedStatus" placeholder="工作状态" @change="getList()">
        <el-option
            v-for="(item, index) of statuses"
            :key="index"
            :label="item.status_name"
            :value="item.status"
          >
            <div>
              {{item.status_name}}
              <el-tag class="status-num" v-if="index > 0" size="mini" effect="plain">{{item.count}}</el-tag>
            </div>
          </el-option>
      </el-select>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="工作ID">
          <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/hireitem/'+scope.row.id">  {{scope.row.id}}</a>
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="企业方">
          <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.uid">{{
                scope.row.user_name + '(' + scope.row.uid + ')'
              }}</a>
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="开发者">
          <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.developer_uid">{{
                scope.row.developer_name + '(' + scope.row.developer_uid + ')'
              }}</a>
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="platform_text" label="来源">
          <template slot-scope="scope">
            <span>{{scope.row.platform_text}}({{scope.row.version}})</span>
          </template>
        </el-table-column>
        <el-table-column prop="work_area_name" label="地点"></el-table-column>
        <el-table-column prop="description" :show-overflow-tooltip="true" label="项目简介"></el-table-column>
        <el-table-column prop="hours" label="工作时间">
          <template slot-scope="scope"><span>{{scope.row.hours}}小时</span></template>
        </el-table-column>
        <el-table-column prop="hours" label="工作时间">
          <template slot-scope="scope"><span><span v-if="scope.row.month>0">{{scope.row.month}}月</span>{{scope.row.day}}天</span></template>
        </el-table-column>
        <el-table-column prop="hours" label="雇佣方式">
          <template slot-scope="scope">
            <span v-if="scope.row.work_time_type==1">全日工作</span>
            <span v-if="scope.row.work_time_type==2">半日工作</span>
            <span v-if="scope.row.work_time_type==3">全日半日皆可</span>
            <span v-if="!scope.row.work_time_type">无</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="总价"></el-table-column>
        <el-table-column prop="pay_time" label="发布时间">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.create_time, 'Y-m-d H:i') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="当前项目状态">
          <template slot-scope="scope">
            <span>{{ scope.row.status_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否发布招聘">
          <template slot-scope="scope">
            <span>{{scope.row.is_recruit == 1 ? '是': '否'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="客户经理">
          <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.account_manager_uid">{{
                scope.row.account_manager_name + '(' + scope.row.account_manager_uid + ')'
              }}</a>
          </span>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <div>{{ scope.row.remark_text }}</div>
            <el-button type="text" @click="onToList(scope.row)">查看备注({{ scope.row.remark_num }})</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="onRemark(scope.row)">添加备注</el-button>
			<el-button class="remind" type="text" v-if="scope.row.is_remind_status==0" @click="onRemind(scope.row)">提醒接单</el-button>
			<el-button class="remind" type="text" v-if="scope.row.is_pay_status==0" @click="onPay(scope.row)">提醒付费</el-button>
            <el-button class="remind" style="background:#eee!important;color:#d2d2d2!important;" type="text" v-if="scope.row.is_remind==1 && scope.row.status==1 ">已提醒接单</el-button>
            <el-button class="remind" style="background:#eee!important;color:#d2d2d2!important;" type="text" v-if="scope.row.is_pay==1 && scope.row.status==3">已提醒付费</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-pagination
        class="order-footer"
        background
        layout="total, prev, pager, next"
        :page-size="20"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog title="添加备注" :visible.sync="remarkModel">
      <div>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="remarkData.content">
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remarkModel = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onRemarkSave">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "user_cards_list",
  data() {
    return {
      page: 1,
      total: 0,
      tableData: [],
      count: {inVerify: 0, inReview: 0, inPay: 0, inDeveloping: 0},
      selectedStatus: 0,
      remarkModel: false,
      remarkData: {id: '0', content: ''},
      statuses: []
    }
  },
  mounted() {
    this.getList()
    this.getCount()
    this.getStatus()
  },
  methods: {
    async getList() {
      const page = this.page;
      const data = {
        page,
        status:this.selectedStatus
      };
      let res = await this.$post("/api/admin/freeWork/getList", data);
      if (res && res.status === 1) {
        this.tableData = res.data.list || [];
        this.total = res.data.total * 1;
      }
    },
    async getCount() {
      let res = await this.$post("/api/admin/freeWork/getCount", {});
      if (res && res.status === 1) {
        this.count = res.data || {};
      }
    },
    async getStatus() {
      let res = await this.$post("/api/admin/freeWork/getStatus");
      if (res && res.status === 1) {
        this.statuses = res.data;
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    // 点击详情
    clickDetail(id) {
      window.open(`/rooter/cloudjobitem/${id}`);
    },
    formatDate(time, format = '') {
      if (time === "0") {
        return "--";
      }
      let now = new Date(time * 1000);
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      let second = now.getSeconds();
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return (format == '' ?
          year +
          "-" +
          month +
          "-" +
          date +
          " " +
          hour +
          ":" +
          minute +
          ":" +
          second
          :
          year +
          "-" +
          month +
          "-" +
          date +
          " " +
          hour +
          ":" +
          minute
      );
    },
     onRemark(row) {
      this.remarkData.id = row.id;
      // this.remarkData.content = row.remark || '';
      this.remarkModel = true;
    },
	onRemind(row) {
      var that=this;
        let body = {
          uid: row.developer_uid,
		  hire_id: row.id,
        };
        this.$post("/api/admin/freeWork/remind", body).then((res)=>{
          if (res.status==1){
            this.$message({
              message: '提醒成功',
              type: 'success'
            })
            that.getList();
          }
		  else
		  {
			this.$message({
              message: res.info,
              type: 'success'
            })
		  }
        });

      },
	 onPay(row) {
     var that=this;
        let body = {
          uid: row.uid,
		  hire_id: row.id,
        };
        this.$post("/api/admin/freeWork/pay", body).then((res)=>{
          if (res.status==1){
            that.getList();
            this.$message({
              message: '提醒成功',
              type: 'success'
            })
          }
		  else
		  {
			this.$message({
              message: res.info,
              type: 'success'
            })
		  }
        });

      },
    onToList(row) {
      let data = {
        obj_id: row.id,
        type: 5
      }
      this.$router.push({path: '/main/remark_list', query: data});
    },
    async onRemarkSave() {
      this.loading = true;
      if (this.remarkData.content === '' || this.remarkData.id === '0') {
        this.$message.error('请输入内容')
        this.loading = false
        return false
      }

      let data = {content: this.remarkData.content, id: this.remarkData.id}
      let res = await this.$post("/api/admin/freeWork/saveRemark", data);
      if (res && res.status === 1) {
        this.$message.success('备注成功')
        this.remarkModel = false
        this.getData()
      }
      this.loading = false
    },

  }

}
</script>

<style scoped>
.count-list {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}
.status-num{
  float: right;
  margin-top: 6px;
}
.remind{
	background:red;
	padding:10px;
	color:white;
}
</style>
