<template>
  <view class="container"
        style="margin-top: 20rpx;">
    <tui-form ref="form"
              :show-message="false"
              :model="form">
      <view class="header">
        <tui-card style="flex: 1;">
          <template>
            <tui-section title="姓名:">
              <view>{{name}}</view>
            </tui-section>
            <tui-section title="单位:">{{orgInfo.name}}</tui-section>
            <tui-section title="岗位:">{{roleName}}</tui-section>
          </template>
        </tui-card>
        <tui-card style="width: 120px;height: 120px;;margin-left: 0;">
          <template>
            <image src="/static/images/person.jpg"
                   style=" width:120px; height:120px;"></image>
          </template>
        </tui-card>
      </view>
      <tui-card style="margin-top: 20rpx;">
        <template>
          <view class="tui-default">
            <tui-form-item label="项目部:"
                           labelFontWeight="600">
              <tui-input padding="0"
                         :borderBottom="false"
                         placeholder="请选择项目部"
                         disabled
                         backgroundColor="transparent"
                         v-model="form.project_department"></tui-input>
              <template v-slot:right>
                <tui-form-button width="100rpx"
                                 height="60rpx"
                                 background="#f2f2f2"
                                 color="#5677fc"
                                 :size="24"
                                 bold
                                 radius="12rpx">选择</tui-form-button>
              </template>
            </tui-form-item>
          </view>
        </template>
      </tui-card>
      <tui-card style="margin-top: 20rpx;">
        <template>
          <view class="tui-default">
            <tui-form-item label="隐患级别:"
                           labelFontWeight="600">
              <tui-radio-group v-model="form.find_problem_level">
                <view style="display: flex;">
                  <tui-label v-for="(item,index) in radioItems"
                             :key="index"
                             margin="0 0 0 10rpx">
                    <tui-radio :checked="item.checked"
                               :value="item.value"
                               color="#5179ef"
                               borderColor="#5179ef">
                    </tui-radio>
                    <text class="tui-text">{{item.name}}</text>
                  </tui-label>
                </view>
              </tui-radio-group>
            </tui-form-item>
          </view>
        </template>
      </tui-card>
      <tui-card :title="{text:'隐患描述'}"
                style="margin-top:20rpx;margin-bottom: 20rpx;">
        <template v-slot:body>
          <tui-textarea placeholder="请输入隐患描述"
                        v-model="form.find_problem_description"></tui-textarea>
        </template>
      </tui-card>
      <tui-card :title="{text:'隐患视频'}">
        <template v-slot:body>
          <view style="padding: 20rpx;">
            <tui-upload ref="uploadRef"
                        :value="initializeImg"
                        :serverUrl="serverUrl"
                        @complete="result"></tui-upload>
          </view>
        </template>
      </tui-card>
      <view class="tui-btn__box">
        <tui-button width="400rpx"
                    height="84rpx"
                    bold
                    @click="submit">上报</tui-button>
      </view>
    </tui-form>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
const rules = [];
export default {
  data() {
    return {
      value: [],
      serverUrl:
        "https://anquansys.sxlq.com:37100/uploadoss/upload?token=1add2b5e9c36ce7d75a1ff3d11b9ffb8",
      initializeImg: [], //初始化图片
      radioItems: [
        {
          name: "轻度",
          value: "1",
          checked: true,
        },
        {
          name: "中等",
          value: "2",
          checked: false,
        },
        {
          name: "重度",
          value: "3",
          checked: false,
        },
      ],
      form: {
        find_problem_level: "", //问题等级问题等级  （123分别表示 轻中重）
        find_problem_description: "", //问题描述
        find_problem_video: "", //问题视频
      },
    };
  },
  computed: {
    ...mapGetters(["avatar", "name", "userId", "orgInfo"]),
    ...mapState(["roleName"]),
  },
  onLoad() {
    (this.form = {
      // project_department: '太原联络线ZBLJL1项目部', //所巡查的项目部
      find_problem_type: "3", //问题类型 （1全员  2专项巡查 3 日常巡查）
      find_problem_type_source_id: "", //巡查任务的id
      find_problem_person_id: this.userId, //发现问题人的id
      find_problem_person_name: this.name, //发现问题人的名称
      find_problem_person_job: this.roleName, //问题发现人的工作岗位
      find_problem_person_avatar: this.avatar,
      find_problem_address: "山西省晋中市寿阳县平头镇", //巡查位置
      find_problem_location: "", //巡查位置定位
      find_problem_person_org_id: this.orgInfo.id, //发现问题人的组织id
      find_problem_person_org_name: this.orgInfo.name,
      find_problem_person_org_deptcode: this.orgInfo.deptcode, //发现问题人的组织编码
      find_problem_person_company_id: "", //发现问题人的公司id
      find_problem_person_company_name: "", //发现问题人的公司名称
      find_problem_person_project_id: "", //发现问题人的项目部id
      find_problem_person_project_name: "", //发现问题人的项目部名称
      find_problem_person_project_deptcode: "", //发现问题人的项目部编码
    }),
      this.getUserRoleById();
  },
  methods: {
    ...mapActions(["getUserRoleById"]),
    submit() {
      if (!this.$refs.form) return;
      this.$refs.form
        .validate(this.form, rules)
        .then(async (res) => {
          // if (res.isPass) {
          // 	const res = await this.$request.post("patrol/problem/everyDayReport", {
          // 		body: this.form,
          // 	});
          // 	if (res.code == 0) {
          // 		uni.showToast({
          // 			icon: 'none',
          // 			title: '上报成功'
          // 		})
          // 		setTimeout(()=>{
          // 			uni.navigateBack({
          // 				delta: 1
          // 			})
          // 		},1000)
          // 	}
          // }
        })
        .catch((errors) => {
          console.log(errors);
        });
    },
    //视频上传的结果
    result(e) {
      this.form.find_problem_video = e.imgArr;
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
}

.tui-title {
  width: 100%;
  font-size: 28rpx;
  color: #888;
  padding: 30rpx;
  box-sizing: border-box;
}

.tui-btn__box {
  width: 100%;
  padding: 60rpx 0;
  display: flex;
  justify-content: center;
}

.tui-text {
  font-size: 30rpx;
  padding-left: 12rpx;
}
</style>